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

ld-select current value not visible due to incorrect z-order #373

Closed
borisdiakur opened this issue Jul 12, 2022 · 2 comments · Fixed by #374
Closed

ld-select current value not visible due to incorrect z-order #373

borisdiakur opened this issue Jul 12, 2022 · 2 comments · Fixed by #374
Assignees
@borisdiakur
Labels
bug An issue describing unexpected or malicious behaviour. confirmed This label indicates that the issue has been reproduced and verified by the core team. released

Comments

@borisdiakur
Copy link
Contributor

borisdiakur commented Jul 12, 2022 •
edited
Loading

Bug description

Setting will-change: transform on a container containing an ld-select component leads to incorrect rendering of the select component (see screenshots below).

Without will-change: transform:
Screenshot 2022-07-12 at 15 04 50

With will-change: transform:
Screenshot 2022-07-12 at 15 04 38

Steps to reproduce the behavior

  1. Go to https://liquid.emd.design/liquid/components/ld-select/
  2. Click on the select component

Expected behavior

"Pick a fruit" is still visible (even if used inside a container with will-change: transform).

Actual behavior

"Pick a fruit" is not visible.

Details about device, OS, browser (including versions)

  • OS: macOS 12.4
  • Browser: Opera 88.0.4412.74 (arm64)

Workaround

Using detached mode.
@borisdiakur borisdiakur added bug An issue describing unexpected or malicious behaviour. confirmed This label indicates that the issue has been reproduced and verified by the core team. in progress This label indicates that the issue is currently being worked on. labels Jul 12, 2022
@borisdiakur borisdiakur self-assigned this Jul 12, 2022
borisdiakur added a commit that referenced this issue Jul 12, 2022
@borisdiakur
fix(ld-select): current value not visible due to incorrect z-order
84c4d64 
Resolves #373
borisdiakur added a commit that referenced this issue Jul 12, 2022
@borisdiakur
fix(ld-select): current value not visible due to incorrect z-order
241aa28 
Resolves #373
@borisdiakur borisdiakur mentioned this issue Jul 12, 2022
Merged
9 tasks
borisdiakur added a commit that referenced this issue Jul 12, 2022
@borisdiakur
fix(ld-select): current value not visible due to incorrect z-order
3ee71f0 
Resolves #373
borisdiakur added a commit that referenced this issue Jul 12, 2022
@borisdiakur
fix(ld-select): current value not visible due to incorrect z-order
68d1391 
Resolves #373
github-actions bot pushed a commit that referenced this issue Jul 13, 2022
@semantic-release-bot
chore(release): 2.3.0 [skip ci]
64a3509 
# [2.3.0](v2.2.0...v2.3.0) (2022-07-13)

### Bug Fixes

* **ld-select:** current value not visible due to incorrect z-order ([68d1391](68d1391)), closes [#373](#373)
* **typography:** use font-smoothing on safari ([8af6e8f](8af6e8f))

### Features

* **ld-select, ld-tooltip:** tetherOptions prop as object ([c2dd94c](c2dd94c))
* **ld-switch:** add ld-switch component ([f6d4f1f](f6d4f1f))
@borisdiakur
Copy link
Contributor Author

🎉 This issue has been resolved in version 2.3.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@borisdiakur borisdiakur added done and removed in progress This label indicates that the issue is currently being worked on. labels Jul 28, 2022
@ArpithaKamath
Copy link

ArpithaKamath commented Jul 28, 2022 •
edited
Loading

Is it possible to view the dropdown options below the current selected value so that you can see what's selected. Also when it comes to filter, its easier if we can see what we type but in this case the entire options section covers the selected section.
https://codesandbox.io/s/silly-wave-n38ed4?file=/src/App.js
Observed in 2.4.1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@borisdiakur borisdiakur

Labels
bug An issue describing unexpected or malicious behaviour. confirmed This label indicates that the issue has been reproduced and verified by the core team. released
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(ld-select): current value not visible due to incorrect z-order emdgroup-liquid/liquid
2 participants
@borisdiakur @ArpithaKamath