[Hold for Payment August 4th] IOU - Autofocus 'What's it for?' text box in details page

[isagoico]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Request money to a user
2. Enter an amount and tap on request

Expected Result:

Keyboard should come up and auto focused to the "What's it for?"

Actual Result:

Keyboard is not focused to the "What's it for box?" box and user has to manually tap on it to write.

Workaround:

User has to manually tap the text box.

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.0.80-0

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos:

Upwork Issue URL: https://www.upwork.com/jobs/~0100cc108c7250028f

View all open jobs on Upwork

---

From @joekaufmanexpensify https://expensify.slack.com/archives/C01GTK53T8Q/p1626898032104700

The details page for an IOU request should autofocus on the What's it for? field and bring up the keyboard automatically. Also, the green button should float and sit above the keyboard when you tap Optional and open the keyboard. Both of these are happening on iOS. Screenshots in

[MelvinBot]

Triggered auto assignment to @bondydaa (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[rushatgabhane]

If you make it External

Proposal

In components/IOUConfirmationList

add autoFocus prop to the TextInput

[aman-atg]

Proposal

• Inside
  

  App/src/components/IOUConfirmationList.js

  Lines 272 to 278 in c009187

  	<TextInput
  	style={[styles.textInput]}
  	value={this.props.comment}
  	onChangeText={this.props.onUpdateComment}
  	placeholder={this.props.translate('common.optional')}
  	placeholderTextColor={themeColors.placeholderText}
  	/>

• canFocusInputOnScreenFocus should be used here with autoFocus

• It'll look like this :
  

[rushatgabhane]

@aman-atg

canFocusInputOnScreenFocus should be used here with autoFocus

Hmm, why? It just returns false, so it won't work.

App/src/libs/canFocusInputOnScreenFocus/index.native.js

Line 1 in c009187

export default () => false;

[aman-atg]

@aman-atg

canFocusInputOnScreenFocus should be used here with autoFocus

Hmm, why? It just returns false, so it won't work.

App/src/libs/canFocusInputOnScreenFocus/index.native.js

Line 1 in c009187

export default () => false;

• It's so that we auto focus only when we need to (cross-compatiblity)
• Check this file out

  App/src/libs/canFocusInputOnScreenFocus/index.js

  Lines 1 to 3 in c009187

  	import canUseTouchScreen from '../canUseTouchscreen';
  	export default () => !canUseTouchScreen();

[bondydaa]

Feel pretty confident since we've already got 2 contributors commenting that we can make this External 😁 .

I do see that we've got some usages of canUseTouchScreen but it's not used everywhere right now:

Ex (note I know some of these are default props/initial state - just sharing for context):

Expensidev/App (main) $ ack -C 5 autoFocus
src/components/AddPlaidBankAccount.js
183-                                        style={[styles.textInput, styles.mb2]}
184-                                        value={this.state.password}
185-                                        autoCompleteType="password"
186-                                        textContentType="password"
187-                                        autoCapitalize="none"
188:                                        autoFocus={canFocusInputOnScreenFocus()}
189-                                        onChangeText={text => this.setState({password: text})}
190-                                    />
191-                                </View>
192-                            )}
193-                        </View>

src/components/TextInputFocusable/index.android.js
21-
22-    /** When the input has cleared whoever owns this input should know about it */
23-    onClear: PropTypes.func,
24-
25-    /** Set focus to this component the first time it renders.
26:     * Override this in case you need to set focus on one field out of many, or when you want to disable autoFocus */
27:    autoFocus: PropTypes.bool,
28-
29-    /** Prevent edits and interactions like focus for this input. */
30-    isDisabled: PropTypes.bool,
31-
32-};
33-
34-const defaultProps = {
35-    shouldClear: false,
36-    onClear: () => {},
37:    autoFocus: false,
38-    isDisabled: false,
39-    forwardedRef: null,
40-};
41-
42-class TextInputFocusable extends React.Component {

src/components/TextInputFocusable/index.js
48-
49-    /** Whether or not this TextInput is disabled. */
50-    isDisabled: PropTypes.bool,
51-
52-    /** Set focus to this component the first time it renders.
53:    Override this in case you need to set focus on one field out of many, or when you want to disable autoFocus */
54:    autoFocus: PropTypes.bool,
55-
56-    /** Update selection position on change */
57-    onSelectionChange: PropTypes.func,
58-
59-    /** Selection Object */
--
76-    onDragEnter: () => {},
77-    onDragOver: () => {},
78-    onDragLeave: () => {},
79-    onDrop: () => {},
80-    isDisabled: false,
81:    autoFocus: false,
82-    forwardedRef: null,
83-    onSelectionChange: () => {},
84-    selection: {
85-        start: 0,
86-        end: 0,

src/components/TextInputFocusable/index.ios.js
21-
22-    /** When the input has cleared whoever owns this input should know about it */
23-    onClear: PropTypes.func,
24-
25-    /** Set focus to this component the first time it renders.
26:     * Override this in case you need to set focus on one field out of many, or when you want to disable autoFocus */
27:    autoFocus: PropTypes.bool,
28-
29-    /** Prevent edits and interactions like focus for this input. */
30-    isDisabled: PropTypes.bool,
31-
32-    /** Selection Object */
--
38-};
39-
40-const defaultProps = {
41-    shouldClear: false,
42-    onClear: () => {},
43:    autoFocus: false,
44-    isDisabled: false,
45-    forwardedRef: null,
46-    selection: {
47-        start: 0,
48-        end: 0,

src/pages/home/report/ReportActionItemMessageEdit.js
128-                        style={[styles.textInputCompose, styles.flex4]}
129-                        onFocus={() => {
130-                            scrollToIndex({animated: true, index: this.props.index}, true);
131-                            toggleReportActionComposeView(false);
132-                        }}
133:                        autoFocus
134-                        selection={this.state.selection}
135-                        onSelectionChange={this.onSelectionChange}
136-                    />
137-                </View>
138-                <View style={[styles.flexRow, styles.mt1]}>

src/pages/home/report/ReportActionCompose.js
534-                                            />
535-                                        </>
536-                                    )}
537-                                </AttachmentPicker>
538-                                <TextInputFocusable
539:                                    autoFocus={this.shouldFocusInputOnScreenFocus}
540-                                    multiline
541-                                    ref={this.setTextInputRef}
542-                                    textAlignVertical="top"
543-                                    placeholder={inputPlaceholder}
544-                                    placeholderTextColor={themeColors.placeholderText}

src/pages/home/report/EmojiPickerMenu/index.js
343-                            placeholderTextColor={themeColors.textSupporting}
344-                            onChangeText={this.filterEmojis}
345-                            style={styles.textInput}
346-                            defaultValue=""
347-                            ref={el => this.searchInput = el}
348:                            autoFocus
349-                            selectTextOnFocus={this.state.selectTextOnFocus}
350-                        />
351-                    </View>
352-                )}
353-                {this.state.filteredEmojis.length === 0

src/pages/signin/PasswordForm.js
90-                        autoCompleteType="password"
91-                        textContentType="password"
92-                        value={this.state.password}
93-                        onChangeText={text => this.setState({password: text})}
94-                        onSubmitEditing={this.validateAndSubmitForm}
95:                        autoFocus
96-                    />
97-                </View>
98-
99-                {this.props.account.requiresTwoFactorAuth && (
100-                    <View style={[styles.mv3]}>

src/pages/signin/LoginForm.js
83-                        autoCapitalize="none"
84-                        autoCorrect={false}
85-                        keyboardType={getEmailKeyboardType()}
86-                        placeholder={this.props.translate('loginForm.phoneOrEmail')}
87-                        placeholderTextColor={themeColors.placeholderText}
88:                        autoFocus={canFocusInputOnScreenFocus()}
89-                    />
90-                </View>
91-                <View style={[styles.mt5]}>
92-                    <Button
93-                        success

If this is the right method to use (not 100% sure here since I'm not super familiar with new expensify code) then we should probably make sure it's used everywhere properly so that as more people contribute and see instances of how to do autoFocus it's all being handled in the same way.

cc @AndrewGable @roryabraham @marcaaron @tgolen to gut check me here 🙇

[MelvinBot]

Triggered auto assignment to @trjExpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.