ID conflict in between "Send empty value" checkboxes

Open Beginner friendly
#10,890 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
65/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Quiet
Tech stack
javascript
Domain
frontend

Research direction

Start by loading the supplied OpenAPI 3.1 definition in Swagger UI and reproducing the two “Send empty value” controls in the form. Search the frontend implementation for that control and inspect how each checkbox and label receives its ID; done means each label toggles only its adjacent checkbox.

Written by the indexing model from the issue text.

Description

Q&A (please complete the following information)
  • OS: Linux Debian 13
  • Browser: firefox
  • Version: Zen 1.19.8b (Firefox 149.0.2)
  • Method of installation: npm
  • Swagger-UI version: 5.32.6
  • Swagger/OpenAPI version: OpenAPI 3.1
Content & configuration

Example Swagger/OpenAPI definition:

openapi: 3.1.0
paths:
  /hello:
    post:
      requestBody:
        content:
          application/x-www-form-urlencoded:
            schema:
              properties:
                foo:
                  type: string
                bar:
                  type: string
                  default: ""
                baz:
                  type: string
                  default: ""
              type: object
              required:
                - foo
        required: true

Swagger-UI configuration options: defaults.

Describe the bug you're encountering

An ID conflict between the checkboxes is causing all their labels to only control one. (see screenshot)

To reproduce...

Steps to reproduce the behavior:

  1. Load the OpenAPI definition above
  2. Expand the /hello endpoint
  3. Click 'Try it out'
  4. Click on one of the 'Send empty value' labels
  5. Click on the other label
  6. See that the same checkbox was toggled
Expected behavior

Each label controls the checkbox it is located next to.

Screenshots
Image
Additional context or thoughts
Dominant language
JavaScript
Stars
29k
Forks
9.3k
Avg merge
2d 23h
Merged PRs (30d)
25

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from swagger-api/swagger-ui

All issues in swagger-api/swagger-ui

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.