fix: Improve Usability of Adding Options via Return Key for Multi-Select Field

[nganphan123]

Fixes #6602

This is the approach that I followed based on these comments #6602 (comment), #6602 (comment)

• Create forward ref in <TextInput> component
• Create ref to select text in parent component <SettingsDataModelFieldSelectFormOptionRow> and pass it to <TextInput>

[greptile-apps]

PR Summary

This PR addresses issue #6602 by improving the usability of adding options via the Return key for multi-select fields. The changes focus on enhancing the text selection behavior when a new option is added.

• Implemented forwardRef in TextInput component to allow parent components to access the input element directly
• Added hasFocused state and handleInputRef callback in SettingsDataModelFieldSelectFormOptionRow to manage focus and text selection
• Modified TextInput to use useCombinedRefs hook, combining the forwarded ref with the internal inputRef
• Updated SettingsDataModelFieldSelectFormOptionRow to pass a ref prop to TextInput, enabling automatic text selection for new options

_{2 file(s) reviewed, 1 comment(s)
Edit PR Review Bot Settings}

[greptile-apps]

style: consider using node && !hasFocused && focused instead of Boolean(node) && !hasFocused && Boolean(focused) for consistency and readability

[nganphan123]

Hi @FelixMalfait , thank you for reviewing my previous PR. Please let me know if the current way is the right approach. Otherwise, I'm happy to take another direction. Thank you!

[charlesBochet]

Hi @nganphan123, the way you have chosen seems quite hacky to me:

• putting a callback with logic within a ref (on the project refs are limited to dom manipulation only)
• adding a useEffect in the TextInput when we can trigger behaviors synchronously and more precisely (here enter press)

I'm investigating a bit to give you more precise hints

[lucasbordeau]

Hi,

The difficulty here was to work at the right abstraction layer.

We wanted the selection to happen on new select option row, so the component SettingsDataModelFieldSelectFormOptionRow was the most indicated to encode this intent.

The intent was "the new option row should be selected and focused on mount" so I divided this into other intents :

• The input can be focused on mount => new props autoFocusOnMount in TextInput (which is purely generic)
• The input can be selected on mount => new props autoSelectOnMount in TextInput (which is also purely generic)
• The SettingsDataModelFieldSelectFormOptionRow should know if its a new row => new props isNewRow

Then in the option row .map, we just tell each row if it's a new row or not.

[oss-gg]

Awarding nganphan123: 150 points 🕹️ Well done! Check out your new contribution on oss.gg/nganphan123

[github-actions]

Thanks @nganphan123 for your contribution!
This marks your 3rd PR on the repo. You're top 9% of all our contributors 🎉
See contributor page - Share on LinkedIn - Share on Twitter