Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: auto focus and scroll to bottom on large-text in composer #28790

Merged
merged 15 commits into from
Oct 17, 2023
Merged

fix: auto focus and scroll to bottom on large-text in composer #28790

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
adc3aee
fix: auto focus and scroll to bottom on large-text in composer
jeet-dhandha Oct 4, 2023
72bb8a2
changed shouldAutoFocus to autoFocusCheck in Composer
jeet-dhandha Oct 4, 2023
3828277
updated name for flag and fixed callback dependencies
jeet-dhandha Oct 4, 2023
f070f8b
removed extra code
jeet-dhandha Oct 4, 2023
f189981
removed InteractionManager as it was creating a janky animation
jeet-dhandha Oct 5, 2023
23ff678
Updated comments and variable name for better understanding
jeet-dhandha Oct 6, 2023
2dafa3f
remove unnecessary code.
jeet-dhandha Oct 9, 2023
d79641a
removed `focusWithScrolledToBottom`
jeet-dhandha Oct 9, 2023
317d060
fix: remove extra code and handle web scroll to bottom
jeet-dhandha Oct 10, 2023
5b2d7b9
Merge branch 'main' into fix-27153
jeet-dhandha Oct 10, 2023
82778ee
removed extra useEffect and extra checks
jeet-dhandha Oct 11, 2023
8972e44
updated checks
jeet-dhandha Oct 12, 2023
fbb9dac
Merge branch 'main' into fix-27153
jeet-dhandha Oct 13, 2023
1fbbbb0
Update src/pages/home/report/ReportActionCompose/ComposerWithSuggesti…
jeet-dhandha Oct 13, 2023
ce44e6e
Merge branch 'main' into fix-27153
jeet-dhandha Oct 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions src/libs/UpdateMultilineInputRange/index.ios.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,9 @@
* See https://github.com/Expensify/App/issues/20836 for more details.
*
* @param {Object} input the input element
* @param {boolean} shouldAutoFocus
*/
export default function updateMultilineInputRange(input) {
export default function updateMultilineInputRange(input, shouldAutoFocus = true) {
if (!input) {
return;
}
Expand All @@ -19,5 +20,7 @@ export default function updateMultilineInputRange(input) {
* Issue: does not scroll multiline input when text exceeds the maximum number of lines
* For more details: https://github.com/Expensify/App/pull/27702#issuecomment-1728651132
*/
input.focus();
if (shouldAutoFocus) {
input.focus();
}
}
4 changes: 3 additions & 1 deletion src/libs/UpdateMultilineInputRange/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,10 @@
* See https://github.com/Expensify/App/issues/20836 for more details.
*
* @param {Object} input the input element
* @param {boolean} shouldAutoFocus
*/
export default function updateMultilineInputRange(input) {
// eslint-disable-next-line no-unused-vars
export default function updateMultilineInputRange(input, shouldAutoFocus = true) {
if (!input) {
return;
}
Expand Down
5 changes: 5 additions & 0 deletions src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ import withKeyboardState from '../../../../components/withKeyboardState';
import {propTypes, defaultProps} from './composerWithSuggestionsProps';
import focusWithDelay from '../../../../libs/focusWithDelay';
import useDebounce from '../../../../hooks/useDebounce';
import updateMultilineInputRange from '../../../../libs/UpdateMultilineInputRange';
import * as InputFocus from '../../../../libs/actions/InputFocus';

const {RNTextInputReset} = NativeModules;
Expand Down Expand Up @@ -496,9 +497,13 @@ function ComposerWithSuggestions({
focus();
}, [focus, prevIsFocused, editFocused, prevIsModalVisible, isFocused, modal.isVisible, isNextModalWillOpenRef]);
useEffect(() => {
// Scrolls the composer to the bottom and sets the selection to the end, so that longer drafts are easier to edit
updateMultilineInputRange(textInputRef.current, shouldAutoFocus);

if (value.length === 0) {
return;
}

Report.setReportWithDraft(reportID, true);

// eslint-disable-next-line react-hooks/exhaustive-deps
Expand Down
Loading