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

Cypress should not allow selecting a disabled option within a disabled fieldset #5951

Closed
SSmale opened this issue Dec 13, 2019 · 7 comments · Fixed by #15682
Closed

Cypress should not allow selecting a disabled option within a disabled fieldset #5951

SSmale opened this issue Dec 13, 2019 · 7 comments · Fixed by #15682
Labels
good first issue Good for newcomers pkg/driver This is due to an issue in the packages/driver directory type: bug

Comments

@SSmale
Copy link

SSmale commented Dec 13, 2019 •
edited by jennifer-shehane

Current behavior:

If you disable a form group it is still possible to change the value of a select input inside

Desired behavior:

the select input is disabled so should error telling you it is unchangeable, similar to the not visible error

Steps to reproduce: (app code and test code)

<fieldset _ngcontent-c15="" class="nopadding" disabled="">
  <div _ngcontent-c15="" class="form-group">
      <label _ngcontent-c15="" for="selectBox">Test Select</label>
      <select _ngcontent-c15="" class="form-control ng-valid ng-untouched ng-pristine" formcontrolname="selectBox" id="selectBox" ng-reflect-name="selectBox">
          <option _ngcontent-c15="" disabled="true" value="0: undefined" hidden="">
              Select Version
          </option>
          <option _ngcontent-c15="" value="1" ng-reflect-value="1">1</option>
          <option _ngcontent-c15="" value="2" ng-reflect-value="2">2</option>
          <option _ngcontent-c15="" value="3" ng-reflect-value="3">3</option>
          <option _ngcontent-c15="" value="4" ng-reflect-value="4">4</option>
          <option _ngcontent-c15="" value="5" ng-reflect-value="5">5</option>
          <option _ngcontent-c15="" value="6" ng-reflect-value="6">6</option>
          <option _ngcontent-c15="" value="7" ng-reflect-value="7">7</option>
          <option _ngcontent-c15="" value="8" ng-reflect-value="8">8</option>
          <option _ngcontent-c15="" value="9" ng-reflect-value="9">9</option>
          <option _ngcontent-c15="" value="10" ng-reflect-value="10">10</option>
      </select>
  </div>
</fieldset>
cy.get('select')
  .filter('#selectBox')
  .select(3)
  .find(':selected')
  .should('contain', 0)

Versions

cy: 3.5
os: windows 10
browser: chrome 78
@jennifer-shehane
Copy link
Member

I see that you are using an older version of Cypress. Before I dive in to completely recreate the issue, could you update to the current version of Cypress and let me know if this is still happening for you? Your issue may have already been fixed. Thanks!

@cypress-bot cypress-bot bot added the stage: awaiting response Potential fix was proposed; awaiting response label Dec 16, 2019
@SSmale
Copy link
Author

SSmale commented Dec 16, 2019

Hi @jennifer-shehane,

I have tested this with version 3.8.0 downloaded this morning and the issue is still there.

@jennifer-shehane
Copy link
Member

jennifer-shehane commented Dec 17, 2019 •
edited

@SSmale Please provide the pure html + css + js to reproduce this. The below code does not produce the behavior you are saying. We'll have to close the issue without a way to run this.

index.html

<!DOCTYPE html>
<html>
<body>
<fieldset _ngcontent-c15="" class="nopadding" disabled="">
  <div _ngcontent-c15="" class="form-group">
    <label _ngcontent-c15="" for="selectBox">Test Select</label>
    <select _ngcontent-c15="" class="form-control ng-valid ng-untouched ng-pristine" formcontrolname="selectBox"
      id="selectBox" ng-reflect-name="selectBox">
      <option _ngcontent-c15="" disabled="true" value="0: undefined" hidden="">
        Select Version
      </option>
      <option _ngcontent-c15="" value="1" ng-reflect-value="1">1</option>
      <option _ngcontent-c15="" value="2" ng-reflect-value="2">2</option>
      <option _ngcontent-c15="" value="3" ng-reflect-value="3">3</option>
      <option _ngcontent-c15="" value="4" ng-reflect-value="4">4</option>
      <option _ngcontent-c15="" value="5" ng-reflect-value="5">5</option>
      <option _ngcontent-c15="" value="6" ng-reflect-value="6">6</option>
      <option _ngcontent-c15="" value="7" ng-reflect-value="7">7</option>
      <option _ngcontent-c15="" value="8" ng-reflect-value="8">8</option>
      <option _ngcontent-c15="" value="9" ng-reflect-value="9">9</option>
      <option _ngcontent-c15="" value="10" ng-reflect-value="10">10</option>
    </select>
  </div>
</fieldset>
</body>
</html>
it('selects', function () {
  cy.visit('index.html')
  cy.get('select')
    .filter('#selectBox')
    .select(3)
    .find(':selected')
    .should('contain', 0)
})

Screen Shot 2019-12-17 at 4 26 22 PM

@cypress-bot cypress-bot bot added stage: needs information Not enough info to reproduce the issue and removed stage: awaiting response Potential fix was proposed; awaiting response labels Dec 17, 2019
@SSmale
Copy link
Author

SSmale commented Dec 17, 2019

it('selects', function () { cy.visit('index.html') cy.get('select') .filter('#selectBox') .select('3') .find(':selected') .should('contain', 0) })

the select should be a string not a number

@jennifer-shehane
Copy link
Member

I can recreate this. This likely has to do with us not considering a fieldset that is disabled - that it will disable all selects within it.

it('selects', () => { 
  cy.visit('index.html') 
  cy.get('select').find(':selected').should('contain', 1) 
  cy.get('select').select('3').find(':selected').should('contain', 1) 
})
<html>
<body>
  <fieldset disabled="">
    <select>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
  </fieldset>
</body>
</html>

Screen Shot 2020-10-20 at 4 12 33 PM

@cypress-bot cypress-bot bot added the stage: ready for work The issue is reproducible and in scope label Oct 20, 2020
@jennifer-shehane jennifer-shehane added type: bug pkg/driver This is due to an issue in the packages/driver directory and removed stage: needs information Not enough info to reproduce the issue labels Oct 20, 2020
@jennifer-shehane jennifer-shehane changed the title You can select a new value for a select in a disabled form group Cypress should not allow selecting a disabled option within a disabled fieldset Oct 20, 2020
@jennifer-shehane jennifer-shehane added the good first issue Good for newcomers label Oct 20, 2020
@herecydev herecydev mentioned this issue Mar 27, 2021
Merged
@cypress-bot cypress-bot bot added stage: work in progress and removed stage: ready for work The issue is reproducible and in scope labels Mar 27, 2021
@cypress-bot
Copy link
Contributor

cypress-bot bot commented Apr 14, 2021

The code for this is done in cypress-io/cypress#15682, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

@jennifer-shehane
Copy link
Member

Released in 7.2.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v7.2.0, please open a new issue.

@cypress-io cypress-io locked as resolved and limited conversation to collaborators Apr 28, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
good first issue Good for newcomers pkg/driver This is due to an issue in the packages/driver directory type: bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: Prevent selecting an option in a disabled fieldset herecydev/cypress
2 participants
@jennifer-shehane @SSmale