Subscribe on changes!

Vue render option tag with empty value attribute without attribute

avatar
Feb 26th 2024

Vue version

3.4.20

Link to minimal reproduction

https://play.vuejs.org/#eNp9kTFPwzAQhf+K5SUglWaAqaRIgDrAAAgYvYTk2ro4tmWf06Aq/52zrZQOqJt977t37+wDv7d23gfgC175xkmLzAMGeye07KxxyA7MwZqNbO1MxwpCi1uhhW6M9pFV0CC0bBmpi6K4JLEqsxN50AWhs6pGoBtjVW5g/VVnWlBLwScHwRNAiLEojWZ9rQIQQMJqsLGJjPAn12fsKyCT6GmsbsFRgr3EraFijeiqMpvkmWWeQZeqPEnDZxw9rbGWm/nOG01PcIi84I3prFTgXpOJF3zBkhK1Wimzf041dBRkqjdbaL7/qe/8EGuCvznw4HoQ/Khh7TaAWV59vMBA56NIDxQU0WfEd/BGhZgxYw9BtxT7hEtpn9JHSr359KsBQftpqRg0kmPiBafPfTyz+l/c6/lN6hN65OMvj0LCWQ==

Steps to reproduce

  1. Create select tag
  2. Create <option value=""></option>

What is expected?

<select>
  <option value=""></option>
</select>

What is actually happening?

<select>
  <option></option>
</select>

System Info

System:
    OS: Linux 5.15 Linux Mint 21.2 (Victoria)
    CPU: (12) x64 AMD Ryzen 5 5600G with Radeon Graphics
    Memory: 11.49 GB / 30.64 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 21.4.0 - ~/.nvm/versions/node/v21.4.0/bin/node
    Yarn: 1.22.21 - ~/.nvm/versions/node/v21.4.0/bin/yarn
    npm: 10.4.0 - ~/.nvm/versions/node/v21.4.0/bin/npm
    pnpm: 8.15.4 - ~/.nvm/versions/node/v21.4.0/bin/pnpm
    bun: 1.0.26 - ~/.nvm/versions/node/v21.4.0/bin/bun
  Browsers:
    Chrome: 121.0.6167.184
  npmPackages:
    vue: ^3.4.20 => 3.4.20

Any additional comments?

No response

avatar
Feb 26th 2024

I've the same issue. It broke my select libs in production :(

avatar
Feb 26th 2024

While I understand that it is an unexpected result, I'm curious how this issue breaks your apps/libraries in real-world usage?

avatar
Feb 26th 2024

While I understand that it is an unexpected result, I'm curious how this issue breaks your apps/libraries in real-world usage?

Hi. An error occurs when working with the backend, which is written in more type-sensitive languages ​​like GO and php8, in my case. For example, I have an automatic typecast get params (id of database entity), which expect int or null, but now i receive:

http://example.com?enitityId="Select a value"

In my app it should throw an error - Expect nullable int, received string.

avatar
Feb 27th 2024

While I understand that it is an unexpected result, I'm curious how this issue breaks your apps/libraries in real-world usage?

https://github.com/jarstone/dselect/blob/main/source/js/dselect.js For example. The error occurs on line 122.

function isPlaceholder(option) {
    return option.getAttribute('value') === ''
}