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

[MDCList] Label collides with text when option value is empty with text #7619

Open
jordy2254 opened this issue May 19, 2022 · 0 comments
Open
Labels

Comments

@jordy2254
Copy link

jordy2254 commented May 19, 2022

Bug report

When the selected value within select that has text but no 'value' the label collides with the text of the option.

Steps to reproduce

  1. Go to https://codepen.io/jordy2254/pen/dydWZEJ
  2. (See error) Label collides with text
  3. Click on the list box, and select the other option
  4. Label does not collide
  5. Click on the list box and select the original option
  6. (See error) Label collides with text again

Actual behavior

When the selected value within select that has text but no 'value' the label collides with the text of the option.

Expected behavior

A blank value that has a text value should cause the label to float and notch

Screenshots

image

Your Environment:

Software Version(s)
MDC Web 13.0.0
Browser Chrome
Operating System Windows

Additional context

It appear's this issue has been raised before has been raised before under #5714

Possible solution

It appears this code retrieves the value of the selected item, in our case this is empty so doesn't float and notch our list. It seems the potential solution to this is to change this area code to look at the mdc-list-item__text class within the option in order to decide if the label should float and notch.

@jordy2254 jordy2254 added the bug label May 19, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant