Ensure the caret is in a consistent position when syncing the Combobox.Input value
#2568
Conversation
This will ensure the caret is always in a consistent location once the input value has synced. We will _not_ do this while the user is typing because changing the position while typing will result in odd results. Safari already kept the caret at the end, Chrome put the caret at the end but once you synced the value once the caret was in front of the text.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Ensure that we only move the caret to the end, if the selection didn't
change in the meantime yet. For example when you have code like this:
```js
<Combobox.Input onFocus={e => e.target.select()} />
```
This will select all the text in the input field, if we just move the
caret position without keeping this into account then we would undo this
behaviour.
|
What is the designated way to use a custom component or template using the "as" parameter for ComboBoxInput, as the documentation suggests? It seems to me that this change together using anything else than an input component leads to error like |
|
@peterbud you have to make sure that you forward all the incoming props and ensure the import { forwardRef } from 'react'
const MyCustomInput = forwardRef((props, ref) => {
return <input ref={ref} {...props} />
}) |
|
@RobinMalfait thanks - I'm using vue, and it seems there is no similar thing to React's |
|
@RobinMalfait what if we're doing something like this for a tokenized multiselect? It seems my comboboxes are all broken with this change after upgrading to latest with the error Is there a way to get this to function? |
This PR will ensure that the caret is always in a consistent location once the input value is synced with the selected option. We will not do this while the user is typing because changing the position while typing will result in odd results.
Safari already kept the caret at the end, Chrome put the caret at the end but once you synced the value once the caret was in front of the text.
We will also only change the caret position if the position / selection didn't change in the meantime. For example, if you have code like this:
This will select all the text in the input field, if we just move the caret position without keeping this into account then we would undo this behaviour which is something we don't want to do.
Fixes: #2528