KQL autocomplete cut off in visualize editor #73250
Conversation
DianaDerevyankina
added
Feature:Vis Editor
src/plugins/data/public/ui/query_string_input/query_string_input.tsx
Outdated
Show resolved
Hide resolved
DianaDerevyankina
added
the
Team:Visualizations
|
Pinging @elastic/kibana-app (Team:KibanaApp) |
|
@lizozom @stratoula could you please have a look that? |
|
@dziyanadzeraviankina could you please add some screens how it works now? |
|
@alexwizp, sure, updated the description by adding some screens |
|
@dziyanadzeraviankina thanx for that! Some initial findings:
On a bigger screen, I don't see the whole row (this existed before too) I like that the list opens up when there is no space 💯 |
|
|
||
| if (queryBarRect && kbnTypeaheadDiv) { | ||
| const documentHeight = document.documentElement.clientHeight || window.innerHeight; | ||
| const suggestionsListOffsetBottom = 20; |
There was a problem hiding this comment.
nit: we could gather all the constants on a constants file. It will be cleaner I think and easier to find. As far as I can understand these are suggestionsListOffsetBottom , defaultMaxHeight and dropdownHeight
| @@ -60,6 +60,7 @@ interface Props { | |||
| onChangeQueryInputFocus?: (isFocused: boolean) => void; | |||
| onSubmit?: (query: Query) => void; | |||
| dataTestSubj?: string; | |||
| dropdownHeight?: string; | |||
There was a problem hiding this comment.
I think it would be better if we could override this setting via CSS in visualize editor, rather than pass it in as an argument, or at least somehow resolve this by passing in a custom class.
The QueryStringInput component is public API and I'd rather not add very specific properties to it.
|
Tested and fix works well, but see my comment. |
|
Hi @dziyanadzeraviankina, I'm finding a few bugs with this new rendering mechanism.
Would it help at all to use the EuInputPopover (see bottom of this page) to wrap the text field in which comes with all the positioning and is already wrapped in a portal. |
|
@elasticmachine merge upstream |
💚 Build SucceededBuild metrics@kbn/optimizer bundle module count
async chunks size
page load bundle size
History
To update your PR or re-run it, just comment with: |
|
Here's another solution to the issue with styled-components used #75557. |
|
Closing this pull request as for this issue was created another one with a better solution #75557 |
Closes #70964
Made KQL autocomplete dropdown appear not cut off.
To make SuggestionsComponent able to open outside the accordion it was put into EuiPortal so now it's no longer cut off:
Also now the list opens up if there's not enough space below to fit
Checklist
Delete any items that are not applicable to this PR.
For maintainers