-
Notifications
You must be signed in to change notification settings - Fork 472
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.
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
fix(web): searchbox cursor shifts to end in controlled component #2207
Conversation
* Handles the caret position for input components | ||
* @param {HTMLInputElement} e | ||
*/ | ||
export const handleCaretPosition = (e) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is no longer referenced in any other file.
@@ -506,9 +518,6 @@ const SearchBox = (props) => { | |||
if (value === undefined) { | |||
setValue(inputValue, false, props, undefined, true, false); | |||
} else if (onChange) { | |||
// handle caret position in controlled components | |||
handleCaretPosition(e); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This didn't have any effect and the cursor still shifted to the end. I suspect that when react version is v17
or lower then only this works.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
When SearchBox is used as a controlled component, the cursor shifts to the end while typing in between words.
This happens because:
props.value
is the directly synced value with the input when used as a controlled component.Notion Card
Loom preview attached in notion comments