EuiComboBox converts entered text into a custom option on blur
#1353
Conversation
… user takes away focus, e.g. by tabbing to another element. This prevents the `EuiComboBox` from being mistaken for a `EuiInputText`.
|
@cjcenizal Assuming this is the way we want to go with this, should it also perform this on a tab out? |
Yup, I think so. It's hard to tell but the first blur event in the gif is caused by a tab. The change is triggered on any blur event, regardless of whether it's triggered by tab, clicking outside of the element, or done programmatically. |
|
@cjcenizal Oh, cuz i see it not working with tab, which is why i asked. Meaning, that's how it seems to work when I test it. |
|
Disregard. I think it was just validation of dupes that caused it. Hmm. I wonder if we should clear the input on blur then if for whatever reason it wouldn't complete (normally a validation bit) |
There was a problem hiding this comment.
I'm a little cautious about this creating accidental items, but in the end this is similar to what would happen with a text field that you half filled out. The only place i think it could be problematic is if you have data writing immediately on blur rather than through a form submit. I could see someone possibly wanting to disable this, but I'm OK waiting to see if that's a real problem or jus my own paranoia.
CHANGELOG.md
Outdated
| @@ -3,6 +3,7 @@ | |||
| - Altered functionality of `truncate` on `EuiBreadcrumbs` and added `truncate` ability on breadcrumb item ([#1346](https://github.com/elastic/eui/pull/1346)) | |||
| - Altered `EuiHeader`'s location of `EuiHeaderBreadcrumbs` based on the new `truncate` ability ([#1346](https://github.com/elastic/eui/pull/1346)) | |||
| - Added support for `href` and `target` props in `EuiBasicTable` actions ([#1347](https://github.com/elastic/eui/pull/1347)) | |||
| - `EuiComboBox` will convert entered text into a custom option when the user takes away focus, e.g. by tabbing to another element. This prevents the `EuiComboBox` from being mistaken for a `EuiInputText`. | |||
There was a problem hiding this comment.
I think you can turn this into an "Added support for..." entry.
CHANGELOG.md
Outdated
| @@ -12,6 +13,7 @@ | |||
| **Bug fixes** | |||
|
|
|||
| - Fixed EUI when used in an environment lacking ES Modules support, e.g. Jest ([#1358](https://github.com/elastic/eui/pull/1358)) | |||
| >>>>>>> upstream/master | |||
…lur (elastic#1353)" This reverts commit f7e447e.
…n initial implementation.
…al implementation (#1364) * Don't call onCreateOption callback when input is empty.
Fixes #1307
When I test this out locally the UX feels pretty intuitive to me. What does everyone else think?