Added `delimiter` prop to `EuiComboBox` #3104

anishagg17 · 2020-03-17T11:32:53Z

Summary

Fixes: #1357, functionality can be noticed in the first combo-box example in the demo , (delimenator=",")

Screenshot

when delimenator is input

Pasting delimenator separated value

Copy Functionality

Checklist

~~- [ ] Check against all themes for compatibility in both light and dark modes~~
- [ ] Checked in mobile
- [ ] Checked in IE11 and Firefox

Props have proper autodocs
Added documentation examples
Added or updated jest tests
~~- [ ] Checked for breaking changes and labeled appropriately~~
~~- [ ] Checked for accessibility including keyboard-only and screenreader modes~~
A changelog entry exists and is marked appropriately

kibanamachine · 2020-03-17T11:32:55Z

Since this is a community submitted pull request, a Jenkins build has not been kicked off automatically. Can an Elastic organization member please verify the contents of this patch and then kick off a build manually?

cjcenizal · 2020-03-17T18:43:32Z

CC @sebelga since I believe you had thoughts on similar functionality.

anishagg17 · 2020-03-17T19:31:15Z

I know how to implement the copy feature but Can someone suggest me should i use a button with a copy icon or something else?

cchaos · 2020-03-19T22:54:27Z

@anishagg17 The copy/paste ability is just the OS's innate copy/paste ctrl+c. We don't need to provide a UI for it.

anishagg17 · 2020-03-20T11:15:08Z

But it was requested

The user can click a "Copy" icon, which will copy a delimited string of the pill values to the clipboard.

cchaos · 2020-03-20T16:57:23Z

Ah I see that now in #1357, but I think copying is a rare case and we shouldn't need to provide a UI for it. I've crosse that one out for a simple OS copy ability like requested in #2350

anishagg17 · 2020-03-20T17:09:49Z

@cchaos I have already removed that copy button you may check the functionality now

cchaos · 2020-03-20T17:10:47Z

Does the current state of this PR support OS copying?

anishagg17 · 2020-03-20T17:11:59Z

Not like that in #2350 but we can select text and then copy it

anishagg17 · 2020-03-20T17:13:38Z

I think we may do something like if we double click the pill, it turns into an editable pill with that we can change the content of pill too in some future pr

cchaos · 2020-03-20T17:13:55Z

Can you then remove the reference to #2350 since it doesn't actually fix the issue?

anishagg17 · 2020-03-20T17:14:26Z

removed

cchaos · 2020-03-20T17:14:49Z

Jenkins, test this

kibanamachine · 2020-03-20T17:35:14Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3104/

cchaos

One weird behavior I noticed is that when I am copy/pasting a coma list, it works fine if I then hit enter. However, if I paste and then type the delimiter , it keeps only the first one:

src/components/combo_box/combo_box.tsx

src-docs/src/views/combo_box/combo_box_example.js

src-docs/src/views/combo_box/combo_box_delimiter.js

Co-Authored-By: Caroline Horn <549577+cchaos@users.noreply.github.com>

snide

This is really nice work and a great improvement! I did a functionality check and even made sure that removing things like onCreateOption still worked while this is enabled. I also checked @cchaos' issues were fixed. I have one small suggestion for when onCreateOption is enabled, delimiter is enabled, and the string has the delimiter present. The text that shows in the dropdown should give better feedback. I'd suggest something like Hit enter to add each item separated by {delimiter}

anishagg17 · 2020-03-25T07:11:55Z

Changes made

src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx

…ons_list.tsx Co-Authored-By: Caroline Horn <549577+cchaos@users.noreply.github.com>

cchaos · 2020-03-25T14:22:09Z

Jenkins test this

kibanamachine · 2020-03-25T14:42:48Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3104/

cchaos · 2020-03-25T15:26:48Z

Might be flakey?

Jenkins test this

anishagg17 · 2020-03-25T15:41:01Z

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

I am getting this error while running test command , yesterday also this never gave any output #3104 (comment)

kibanamachine · 2020-03-25T15:47:07Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3104/

src/components/combo_box/combo_box.tsx

anishagg17 · 2020-03-25T16:23:37Z

Changes have been made .

cchaos

Thanks! LGTM, checking for tests

cchaos · 2020-03-25T17:08:12Z

Jenkins test this

kibanamachine · 2020-03-25T17:29:37Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3104/

cchaos · 2020-03-25T18:32:55Z

Jenkins test this

kibanamachine · 2020-03-25T18:52:59Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3104/

chandlerprall

Changes LGTM; Pulled and tested locally, unable to break anything or get into weird states.

added delimenator prop

4111a91

Entering delimeator hits enter functionality added

ac1f76d

anishagg17 changed the title ~~[WIP] added delimenator prop~~ [WIP] added delimiter prop Mar 19, 2020

anishagg17 and others added 6 commits March 19, 2020 22:54

added docs example, CL

fb452c2

Merge branch 'master' into deim

406ec71

prettified

386acbb

removed console.log()

a133ba6

added copy functionality

c3142a4

added test,snap

5d2cb23

anishagg17 changed the title ~~[WIP] added delimiter prop~~ Added delimiter prop to EuiComboBox Mar 19, 2020

anishagg17 added 2 commits March 20, 2020 17:31

removed copy button

e0a58bf

removed copy button

e89727a

cchaos suggested changes Mar 20, 2020

View reviewed changes

src/components/combo_box/combo_box.tsx Show resolved Hide resolved

src-docs/src/views/combo_box/combo_box_example.js Outdated Show resolved Hide resolved

src-docs/src/views/combo_box/combo_box_delimiter.js Outdated Show resolved Hide resolved

anishagg17 and others added 3 commits March 21, 2020 03:23

Update src-docs/src/views/combo_box/combo_box_example.js

ae3ae85

Co-Authored-By: Caroline Horn <549577+cchaos@users.noreply.github.com>

Update src/components/combo_box/combo_box.tsx

864f5a9

Co-Authored-By: Caroline Horn <549577+cchaos@users.noreply.github.com>

fixed only first gets entered

ff3131a

snide reviewed Mar 25, 2020

View reviewed changes

anishagg17 and others added 4 commits March 25, 2020 12:42

updated text

0c08b72

Merge branch 'deim' of https://github.com/anishagg17/eui into deim

14f6499

indent fix

033499a

Update combo_box_options_list.tsx

e983a61

cchaos reviewed Mar 25, 2020

View reviewed changes

src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx Outdated Show resolved Hide resolved

Update src/components/combo_box/combo_box_options_list/combo_box_opti…

5eeff79

…ons_list.tsx Co-Authored-By: Caroline Horn <549577+cchaos@users.noreply.github.com>

anishagg17 added 2 commits March 25, 2020 21:17

Merge branch 'master' of https://github.com/elastic/eui into deim

368c92c

removed empty string

bcd13cd

cchaos reviewed Mar 25, 2020

View reviewed changes

src/components/combo_box/combo_box.tsx Outdated Show resolved Hide resolved

removed redundant code

14ad843

cchaos approved these changes Mar 25, 2020

View reviewed changes

Merge branch 'master' into deim

26ee787

chandlerprall self-requested a review March 25, 2020 19:39

chandlerprall approved these changes Mar 25, 2020

View reviewed changes

chandlerprall merged commit 2bc9917 into elastic:master Mar 25, 2020

anishagg17 deleted the deim branch March 25, 2020 20:08

chandlerprall mentioned this pull request Mar 31, 2020

Upgrade to EUI v22.1.1 elastic/kibana#62065

Closed

chandlerprall mentioned this pull request Apr 8, 2020

Upgrade to EUI v22.3.0 elastic/kibana#62963

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added `delimiter` prop to `EuiComboBox` #3104

Added `delimiter` prop to `EuiComboBox` #3104

anishagg17 commented Mar 17, 2020 •

edited

Loading

kibanamachine commented Mar 17, 2020

cjcenizal commented Mar 17, 2020

anishagg17 commented Mar 17, 2020

cchaos commented Mar 19, 2020

anishagg17 commented Mar 20, 2020

cchaos commented Mar 20, 2020

anishagg17 commented Mar 20, 2020 •

edited

Loading

cchaos commented Mar 20, 2020

anishagg17 commented Mar 20, 2020

anishagg17 commented Mar 20, 2020

cchaos commented Mar 20, 2020

anishagg17 commented Mar 20, 2020

cchaos commented Mar 20, 2020

kibanamachine commented Mar 20, 2020

cchaos left a comment

snide left a comment

anishagg17 commented Mar 25, 2020

cchaos commented Mar 25, 2020

kibanamachine commented Mar 25, 2020

cchaos commented Mar 25, 2020

anishagg17 commented Mar 25, 2020 •

edited

Loading

kibanamachine commented Mar 25, 2020

anishagg17 commented Mar 25, 2020

cchaos left a comment

cchaos commented Mar 25, 2020

kibanamachine commented Mar 25, 2020

cchaos commented Mar 25, 2020

kibanamachine commented Mar 25, 2020

chandlerprall left a comment

Added delimiter prop to EuiComboBox #3104

Added delimiter prop to EuiComboBox #3104

Conversation

anishagg17 commented Mar 17, 2020 • edited Loading

Summary

Screenshot

Checklist

kibanamachine commented Mar 17, 2020

cjcenizal commented Mar 17, 2020

anishagg17 commented Mar 17, 2020

cchaos commented Mar 19, 2020

anishagg17 commented Mar 20, 2020

cchaos commented Mar 20, 2020

anishagg17 commented Mar 20, 2020 • edited Loading

cchaos commented Mar 20, 2020

anishagg17 commented Mar 20, 2020

anishagg17 commented Mar 20, 2020

cchaos commented Mar 20, 2020

anishagg17 commented Mar 20, 2020

cchaos commented Mar 20, 2020

kibanamachine commented Mar 20, 2020

cchaos left a comment

Choose a reason for hiding this comment

snide left a comment

Choose a reason for hiding this comment

anishagg17 commented Mar 25, 2020

cchaos commented Mar 25, 2020

kibanamachine commented Mar 25, 2020

cchaos commented Mar 25, 2020

anishagg17 commented Mar 25, 2020 • edited Loading

kibanamachine commented Mar 25, 2020

anishagg17 commented Mar 25, 2020

cchaos left a comment

Choose a reason for hiding this comment

cchaos commented Mar 25, 2020

kibanamachine commented Mar 25, 2020

cchaos commented Mar 25, 2020

kibanamachine commented Mar 25, 2020

chandlerprall left a comment

Choose a reason for hiding this comment

Added `delimiter` prop to `EuiComboBox` #3104

Added `delimiter` prop to `EuiComboBox` #3104

anishagg17 commented Mar 17, 2020 •

edited

Loading

anishagg17 commented Mar 20, 2020 •

edited

Loading

anishagg17 commented Mar 25, 2020 •

edited

Loading