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

[Component] [select] Component does not render the input element when disabled #18442

Open
diyan-slavov-infoleven opened this issue Oct 4, 2024 · 0 comments · May be fixed by #18443
Open

[Component] [select] Component does not render the input element when disabled #18442

diyan-slavov-infoleven opened this issue Oct 4, 2024 · 0 comments · May be fixed by #18443
Labels

Comments

@diyan-slavov-infoleven
Copy link

Bug Type: Component

Environment

  • Vue Version: 3.5.10
  • Element Plus Version: 2.8.4
  • Browser / OS: any
  • Build Tool: Vite

Reproduction

Related Component

  • el-select

Reproduction Link

Element Plus Playground

Steps to reproduce

Add a disabled prop to the select component

What is Expected?

The input should be rendered with disabled attribute

What is actually happening?

The input is not rendered at all

Additional comments

When <ElSelect /> is disabled, the input is not rendered. This causes a lot of issues in unit tests and breaks patterns often followed by testing-library, namely

  • getByLabelText queries are not working, because the id from the label's for attribute is assigned to the input, which is not rendered - it becomes hard to find <ElSelect /> elements in the document without using explicit testid attributes
  • Assertions like expect(select).toBeDisabled are not working, because the input is not rendered

Apart from that, recent changes to the dom structure of this component also caused these to not work

  • getByDisplayValue is not working, because the value is not assigned to the input element inside the <ElSelect />
  • getByPlaceholderText is not working, because the placeholder is rendered as a span element, instead of being an attribute on the input element
  • getByPlaceholderText is not working when there is a value selected, because then the placeholder is not displayed in the dom
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant