Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Filter Bar] Remove flickering when opening filter bar popover #56222

Merged
merged 2 commits into from
Jan 30, 2020

Conversation

majagrubic
Copy link
Contributor

@majagrubic majagrubic commented Jan 28, 2020

Summary

When opening a filter popover in Discover or Dashboard, the content would flicker before it was rendered:
flickering

Debugging this with @thompsongl, we figured this is due to EuiComboBox being rendered inside EuiPopover. The first element inside EuiPopover gets focus, which is in this case EuiComboBox, and the content of the combo box is rendered before popover has finished rendering. The workaround here is to pass an element for EuiPopover to put focus on, and if the element has no width and height, it will look seamless.
no_flickering

I'm afraid this doesn't solve the issue in Safari, where flickering still occurs, but thought it would be better than nothing.

Checklist

Use strikethroughs to remove checklist items you don't feel are applicable to this PR.

For maintainers

@majagrubic majagrubic added v7.7.0 v8.0.0 Team:Visualizations Visualization editors, elastic-charts and infrastructure labels Jan 28, 2020
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-app (Team:KibanaApp)

@majagrubic majagrubic marked this pull request as ready for review January 28, 2020 20:37
@majagrubic majagrubic requested a review from a team as a code owner January 28, 2020 20:37
@majagrubic majagrubic requested review from a team and myasonik January 28, 2020 20:37
Copy link
Contributor

@myasonik myasonik left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was a little concerned it was going to break focus order or something but running through it in VoiceOver everything seems to work fine. Great work to you both! 🎉

@majagrubic
Copy link
Contributor Author

@elasticmachine merge upstream

@kibanamachine
Copy link
Contributor

💚 Build Succeeded

History

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

Copy link
Contributor

@lizozom lizozom left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changes LGTM

@majagrubic majagrubic merged commit 371abf6 into elastic:master Jan 30, 2020
@majagrubic majagrubic deleted the remove-flickering branch January 30, 2020 14:01
majagrubic pushed a commit that referenced this pull request Jan 30, 2020
… (#56385)

Co-authored-by: Elastic Machine <[email protected]>

Co-authored-by: Elastic Machine <[email protected]>
jloleysens added a commit to jloleysens/kibana that referenced this pull request Jan 31, 2020
…56356

* '7.x' of github.com:elastic/kibana: (23 commits)
  Fix setting filters without $store value (elastic#56304) (elastic#56475)
  [ML] Fix Data Visualizer responsive layout  (elastic#56372) (elastic#56472)
  [ML] conditional rison encoding for query params (elastic#56380) (elastic#56469)
  kuery_autocomplete -> convert remaining items to TS/Jest (elastic#56316) (elastic#56471)
  [APM] Fit service map to container (elastic#56336) (elastic#56463)
  Add animation to service map layout (elastic#56042) (elastic#56460)
  chore(NA): delete data/optimize with kbn clean (elastic#55890) (elastic#56422)
  [APM] Storybook support (elastic#54970) (elastic#56445)
  [DOCS] Updates example in Timelion doc (elastic#56444) (elastic#56454)
  [Logs UI] Fix Check for New Data button on empty indices screen (elastic#56239) (elastic#56320)
  [DOCS] Adds breaking changes for 7.6 (elastic#56437)
  [Monitoring] Change all configs to `monitoring.*` (elastic#56215) (elastic#56421)
  [skip-ci] Add example for migrating pre-handlers (elastic#56080) (elastic#56436)
  [7.x] System index templates can't be edited (elastic#55229) (elastic#56417)
  Add missing docker settings (elastic#56411)
  [Uptime] Use dynamic index pattern in Uptime (elastic#55446) (elastic#56386)
  fix edit rule for detections (elastic#56333) (elastic#56405)
  [Filter Bar] Remove flickering when opening filter bar popover (elastic#56222) (elastic#56385)
  [ILM] Index Lifecycle Policies show wrong unit in Kibana UI (elastic#55228) (elastic#55757)
  Move tsvb server to new platform (elastic#55310) (elastic#56394)
  ...
@cchaos cchaos added EUI and removed Feature:EUI labels Aug 18, 2020
@elasticmachine
Copy link
Contributor

Pinging @elastic/eui-design (EUI)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
EUI Feature:Filters release_note:fix Team:Visualizations Visualization editors, elastic-charts and infrastructure v7.7.0 v8.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants