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.

Sign up for GitHub

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

Jump to bottom

[Security Solution] ESQL editor inserts random values on Enter in upgrade flyout #202206

Closed
Tracked by #201502
xcrzx opened this issue Nov 28, 2024 · 3 comments · Fixed by #204780
Closed
Tracked by #201502

[Security Solution] ESQL editor inserts random values on Enter in upgrade flyout #202206

xcrzx opened this issue Nov 28, 2024 · 3 comments · Fixed by #204780
Assignees
@nikitaindik
Labels
8.18 candidate bug Fixes for quality problems that affect the customer experience Feature:Prebuilt Detection Rules Security Solution Prebuilt Detection Rules area impact:medium Addressing this issue will have a medium level of impact on the quality/strength of our product. Team:Detection Rule Management Security Detection Rule Management Team Team:Detections and Resp Security Detection Response Team Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc.

Comments

@xcrzx
Copy link
Contributor

xcrzx commented Nov 28, 2024 •
edited by nikitaindik
Loading

PR: #204780

Summary

Random values are inserted when a user hits the Enter key in the ESQL editor within the rule upgrade flyout. See the video for illustration of the bug (I only pressing Enter repeatedly):

Screen.Recording.2024-11-27.at.13.22.58.mov

This happens due to an invisible autosuggest field rendered outside the user's viewport. Hitting Enter pastes the first option from the autosuggest.

Additional Details

  • This behavior is reproduced only in the ESQL editor inside the upgrade flyout.
  • The same editor on the rule editing page is not affected by this issue.
@xcrzx xcrzx added 8.18 candidate bug Fixes for quality problems that affect the customer experience Feature:Prebuilt Detection Rules Security Solution Prebuilt Detection Rules area impact:medium Addressing this issue will have a medium level of impact on the quality/strength of our product. Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. Team:Detection Rule Management Security Detection Rule Management Team Team:Detections and Resp Security Detection Response Team labels Nov 28, 2024
@elasticmachine
Copy link
Contributor

Pinging @elastic/security-solution (Team: SecuritySolution)

@elasticmachine
Copy link
Contributor

Pinging @elastic/security-detection-rule-management (Team:Detection Rule Management)

@elasticmachine
Copy link
Contributor

Pinging @elastic/security-detections-response (Team:Detections and Resp)

@banderror banderror self-assigned this Nov 28, 2024
@banderror banderror removed their assignment Dec 4, 2024
@banderror banderror mentioned this issue Dec 4, 2024
Open
@maximpn maximpn mentioned this issue Dec 6, 2024
Closed
@nikitaindik nikitaindik mentioned this issue Dec 18, 2024
Merged
kibanamachine pushed a commit to kibanamachine/kibana that referenced this issue Dec 18, 2024
@nikitaindik
[Security Solution] Rule Upgrade: Fix ES|QL autosuggest tooltip displ…
fe1f37b 
…aying in the wrong place (elastic#204780)

**Resolves: elastic#203305
**Resolves: elastic#202206

## Summary
This PR fixes the ES|QL autosuggest tooltip displaying incorrectly in
the Rule Upgrade flyout. The issue was caused by `EuiFlyoutBody` having
`transform: translateZ(0);`, which created a new CSS stacking context
and affected the positioning of fixed elements. This PR removes the
transform to resolve the issue.

## Background
The `transform: translateZ(0);` was originally
[added](https://github.com/elastic/eui/blob/ffd0cbca4d323ad0b1d5a73c252380d93178e5e7/packages/eui/src/global_styling/mixins/_helpers.ts#L122)
by EUI as a workaround for a Chrome bug that no longer reproduces.

## Testing
The fix has been tested on:
 - Brave (Chromium v131, latest)
- Chromium v118 (version on which the Chrome bug
[occurred](https://issues.chromium.org/issues/40778541#comment13))

No issues were observed with the flyout in either version.

## Screenshots
**Chromium v131 after fix**
<img width="1392" alt="Scherm­afbeelding 2024-12-18 om 15 57 20"
src="https://github.com/user-attachments/assets/d3087341-e5d2-45ca-83a3-70752fc026a4"
/>

**Chromium v118 after fix**
<img width="1392" alt="Scherm­afbeelding 2024-12-18 om 15 57 36"
src="https://github.com/user-attachments/assets/cbcfde0b-e571-4f35-a3cb-e4f35394c59b"
/>

Note: The darker backdrop in older Chromium is unrelated to this change.

Work started on 18-Dec-2024.

(cherry picked from commit 9b09335)
JoseLuisGJ pushed a commit to JoseLuisGJ/kibana that referenced this issue Dec 19, 2024
@nikitaindik @JoseLuisGJ
[Security Solution] Rule Upgrade: Fix ES|QL autosuggest tooltip displ…
0fe3cf5 
…aying in the wrong place (elastic#204780)

**Resolves: elastic#203305
**Resolves: elastic#202206

## Summary
This PR fixes the ES|QL autosuggest tooltip displaying incorrectly in
the Rule Upgrade flyout. The issue was caused by `EuiFlyoutBody` having
`transform: translateZ(0);`, which created a new CSS stacking context
and affected the positioning of fixed elements. This PR removes the
transform to resolve the issue.

## Background
The `transform: translateZ(0);` was originally
[added](https://github.com/elastic/eui/blob/ffd0cbca4d323ad0b1d5a73c252380d93178e5e7/packages/eui/src/global_styling/mixins/_helpers.ts#L122)
by EUI as a workaround for a Chrome bug that no longer reproduces.

## Testing
The fix has been tested on:
 - Brave (Chromium v131, latest)
- Chromium v118 (version on which the Chrome bug
[occurred](https://issues.chromium.org/issues/40778541#comment13))

No issues were observed with the flyout in either version.

## Screenshots
**Chromium v131 after fix**
<img width="1392" alt="Scherm­afbeelding 2024-12-18 om 15 57 20"
src="https://github.com/user-attachments/assets/d3087341-e5d2-45ca-83a3-70752fc026a4"
/>

**Chromium v118 after fix**
<img width="1392" alt="Scherm­afbeelding 2024-12-18 om 15 57 36"
src="https://github.com/user-attachments/assets/cbcfde0b-e571-4f35-a3cb-e4f35394c59b"
/>

Note: The darker backdrop in older Chromium is unrelated to this change.

Work started on 18-Dec-2024.
benakansara pushed a commit to benakansara/kibana that referenced this issue Jan 2, 2025
@nikitaindik @benakansara
[Security Solution] Rule Upgrade: Fix ES|QL autosuggest tooltip displ…
ef52dc3 
…aying in the wrong place (elastic#204780)

**Resolves: elastic#203305
**Resolves: elastic#202206

## Summary
This PR fixes the ES|QL autosuggest tooltip displaying incorrectly in
the Rule Upgrade flyout. The issue was caused by `EuiFlyoutBody` having
`transform: translateZ(0);`, which created a new CSS stacking context
and affected the positioning of fixed elements. This PR removes the
transform to resolve the issue.

## Background
The `transform: translateZ(0);` was originally
[added](https://github.com/elastic/eui/blob/ffd0cbca4d323ad0b1d5a73c252380d93178e5e7/packages/eui/src/global_styling/mixins/_helpers.ts#L122)
by EUI as a workaround for a Chrome bug that no longer reproduces.

## Testing
The fix has been tested on:
 - Brave (Chromium v131, latest)
- Chromium v118 (version on which the Chrome bug
[occurred](https://issues.chromium.org/issues/40778541#comment13))

No issues were observed with the flyout in either version.

## Screenshots
**Chromium v131 after fix**
<img width="1392" alt="Scherm­afbeelding 2024-12-18 om 15 57 20"
src="https://github.com/user-attachments/assets/d3087341-e5d2-45ca-83a3-70752fc026a4"
/>

**Chromium v118 after fix**
<img width="1392" alt="Scherm­afbeelding 2024-12-18 om 15 57 36"
src="https://github.com/user-attachments/assets/cbcfde0b-e571-4f35-a3cb-e4f35394c59b"
/>

Note: The darker backdrop in older Chromium is unrelated to this change.

Work started on 18-Dec-2024.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@nikitaindik nikitaindik

Labels
8.18 candidate bug Fixes for quality problems that affect the customer experience Feature:Prebuilt Detection Rules Security Solution Prebuilt Detection Rules area impact:medium Addressing this issue will have a medium level of impact on the quality/strength of our product. Team:Detection Rule Management Security Detection Rule Management Team Team:Detections and Resp Security Detection Response Team Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc.
Projects
None yet
Milestone
No milestone
4 participants
@xcrzx @banderror @elasticmachine @nikitaindik