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

span-wrapped checkboxes are not selectable (ant design) #530

Closed
frankandrobot opened this issue Jul 5, 2022 · 1 comment · Fixed by #987
Closed

span-wrapped checkboxes are not selectable (ant design) #530

frankandrobot opened this issue Jul 5, 2022 · 1 comment · Fixed by #987
Labels
bug Something isn't working

Comments

@frankandrobot
Copy link

frankandrobot commented Jul 5, 2022

So we currently use antd which produces the following DOM. Notice the DOM structure label > span > input. It appears that this particular hierarchy prevents the checkbox from being selectable in happy-dom. However, it works as is in jsdom. But If we drop the span, it then works with happy-dom:

// Does not work
      <label>
        <span className="ant-checkbox">
          <input type="checkbox" value="" defaultValue="" />
        </span>
        Default group
      </label>

// works
      <label>
        <input type="checkbox" value="" defaultValue="" />
        Default group
      </label>

Repo example: https://gitlab.com/robotandkid/the-sandbox/-/tree/feat/upgrade-happy#9174d1c0208cb45596ee7569e67ff371667941e9

environment:

  • happy-dom: 6.0.2
  • "@testing-library/dom": "^8.11.3",
  • "@testing-library/jest-dom": "^5.14.1",
  • "@testing-library/react": "^12.1.0",
  • "@testing-library/user-event": "^14.0.0-beta.12",

Notes:

  • again, we're using antd, so we most likely do not have control over the generated DOM.

Output:

    TestingLibraryElementError: Unable to find an accessible element with the role "checkbox" and name `/Default/i`

    Here are the accessible roles:

      textbox:

      Name "name":
      <input
        aria-label="name"
        defaultvalue="hello"
        id="name"
        style="max-width: 280px;"
        type="text"
      />

      --------------------------------------------------
      checkbox:

      Name "checkbox":
      <input
        defaultvalue="checked"
        id="checkbox"
        name="checkbox"
        type="checkbox"
        value="checked"
      />

      Name "":
      <input
        defaultvalue=""
        type="checkbox"
        value=""
      />

      --------------------------------------------------
@frankandrobot frankandrobot changed the title span-wrapped checkboxes are not selectable (antd checkboxes) span-wrapped checkboxes are not selectable (ant design) Jul 5, 2022
@capricorn86 capricorn86 added the bug Something isn't working label Oct 14, 2022
capricorn86 added a commit that referenced this issue Aug 2, 2023
#530@minor: Broader support for HTMLLabelElement `control`.
@capricorn86
Copy link
Owner

Thank you for reporting @frankandrobot! 🙂

Big thanks to @joshkel for contributing with a fix 🌟

You can read more about the release here:
https://github.com/capricorn86/happy-dom/releases/tag/v10.6.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants