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

HTML Select with "multiple" attribute leads to "Cannot read properties of undefined" #1365

Closed
3 tasks done
HannesT117 opened this issue Apr 18, 2024 · 4 comments · Fixed by #1366
Closed
3 tasks done

HTML Select with "multiple" attribute leads to "Cannot read properties of undefined" #1365

HannesT117 opened this issue Apr 18, 2024 · 4 comments · Fixed by #1366
Labels
bug Something isn't working plugins/css-blank-pseudo

Comments

@HannesT117
Copy link
Contributor

Reproduction link

No response

Bug description

In https://github.com/csstools/postcss-plugins/blob/main/plugins/css-blank-pseudo/src/browser.js#L52, the code assumes that element.selectedIndex is always the index of an element in the options array.

When using a select field with attribute multiple, this index can be -1 though. This leads to an Uncaught TypeError: Cannot read properties of undefined (reading 'value')

Minimal Example

<!DOCTYPE html>
<html>
  <body>
    <select multiple="" required="">
      <option value="one">One</option>
      <option value="two">Two</option>
      <option value="three">Three</option>
    </select>

    <script src="https://unpkg.com/css-blank-pseudo@6.0.1/dist/browser-global.js"></script>
    <script>
      cssBlankPseudoInit();
    </script>
  </body>
</html>

Actual Behavior

No response

Expected Behavior

No response

Can you reproduce it with npx @csstools/csstools-cli <plugin-name> minimal-example.css?

None

npx Output

No response

Extra config

No response

What plugin are you experiencing this issue on?

CSS Blank Pseudo

Plugin version

6.0.1

What OS are you experiencing this on?

No response

Node Version

18

Validations

  • Follow our Code of Conduct
  • Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this bug?

  • I'm willing to open a PR
@romainmenke romainmenke added bug Something isn't working plugins/css-blank-pseudo labels Apr 18, 2024
@romainmenke
Copy link
Member

Hi @HannesT117,

Thank you for reporting this!

For this plugin we also have puppeteer tests.
Updating these with a failing test can be done here :

postcss-plugins/plugins/css-blank-pseudo/test/_browser.html

Lines 13 to 38 in c13f67d

<input type="tel" id="tel-input" aria-label="">
<input type="text" id="text-input" aria-label="" value="something">
<input type="number" id="number-input" aria-label="">
<input type="password" id="password-input" aria-label="">
<textarea id="textarea" aria-label=""></textarea>
<select id="select" aria-label="">
<option value="" selected>Empty</option>
<option value="non-empty">Non Empty</option>
</select>
<script type="module">
const purple = 'rgb(128, 0, 128)';
const tel = document.getElementById('tel-input');
const text = document.getElementById('text-input');
const number = document.getElementById('number-input');
const password = document.getElementById('password-input');
const textarea = document.getElementById('textarea');
const select = document.getElementById('select');
const elements = {
tel,
text,
number,
password,
textarea,
select,
};

@HannesT117 HannesT117 mentioned this issue Apr 18, 2024
Merged
@HannesT117
Copy link
Contributor Author

Hi @romainmenke thanks for the info! I've extended the tests with a second select :)

@romainmenke
Copy link
Member

This has been released!

Thank you again for reporting and fixing this issue 🙇

@HannesT117
Copy link
Contributor Author

Cool, thank you for the very quick response!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working plugins/css-blank-pseudo
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix possibly undefined property accessor HannesT117/postcss-plugins
2 participants
@romainmenke @HannesT117