[Input controls] Replace react-select with EuiComboBox #17452
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
nreese
added
WIP
💔 Build Failed |
💔 Build Failed |
💔 Build Failed |
💔 Build Failed |
💔 Build Failed |
💔 Build Failed |
💔 Build Failed |
💔 Build Failed |
💔 Build Failed |
💔 Build Failed |
|
With a lot of fields, this is really slow. I created an index pattern without about 3000 fields and typing the first letter took over a second before it displayed the letter. Also, could you sort the fields so that the items that start with the entered text are at the top? The field list in the terms aggregation does this. It uses https://github.com/elastic/kibana/blob/master/src/ui/public/utils/sort_prefix_first.js to do the sorting. |
This was referenced Apr 10, 2018
|
@trevan Great points! I've recorded these within issues in the EUI repo:
Thanks for your help! |
💔 Build Failed |
💔 Build Failed |
💚 Build Succeeded |
💚 Build Succeeded |
stacey-gammon
approved these changes
May 8, 2018
| * Extract filtering value from kibana filters | ||
| * | ||
| * @param {object} kbnFilter | ||
| * @return {array of strings} array of values pulled from filter |
There was a problem hiding this comment.
nit, jsdoc is :
@return {Array.<string>}
💚 Build Succeeded |
nreese
added a commit
to nreese/kibana
that referenced
this pull request
May 8, 2018
* replace react-select with EuiComboBox * remove constructor for ListControl component * get working with portal version * remove overflow visible from input_control_vis since its no longer needed * convert index pattern select to EuiComboBox * replace react-select with EuiComboBox for field select * group fields by type * remove esvm * remove on-foxus box around input cursor * fix jest tests * remove broken jest test * fix functional tests * review changes * remove componentWillMount from field_select * update snapshot changed from rebasing and getting new EUI version * use combo box clear and close buttons for clearing and closing * jsdoc syntax fix
nreese
added a commit
that referenced
this pull request
May 8, 2018
* replace react-select with EuiComboBox * remove constructor for ListControl component * get working with portal version * remove overflow visible from input_control_vis since its no longer needed * convert index pattern select to EuiComboBox * replace react-select with EuiComboBox for field select * group fields by type * remove esvm * remove on-foxus box around input cursor * fix jest tests * remove broken jest test * fix functional tests * review changes * remove componentWillMount from field_select * update snapshot changed from rebasing and getting new EUI version * use combo box clear and close buttons for clearing and closing * jsdoc syntax fix
💔 Build Failed |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
fixes #15247 and #17853
Replaces
react-selectwithEuiComboBox.react-selectoption menu is nested under the component. This meant that the menu got clipped by the panel unlessoverflow: visiblewas set. Settingoverflow: visiblecaused the problems highlighted by #15247.EuiComboBoxuses portal to attach the options menu to the body element. This allows the menu to avoid getting clipped by the dashboard panel.Additional refactoring was required because react-select represents the list of selected values as a comma delimited string while EuiComboBox represents the list of selected values an array of objects.
Updated August 20th 2018
EuiComboBox also has proper support for dark-theme