Select multiple submitting problem when an option is both selected and disabled

Fixed Issue #15371953

Details

Author
evgeny r.
Created
Jan 8, 2018
Privacy
This issue is public.
Found in
  • Microsoft Edge
Found in build #
41.16299
Reports
Reported by 2 people

Sign in to watch or report this issue.

Steps to reproduce

In the following example:

<select multiple name="select" id="select">
  <option selected value="0">0</option>
  <option selected disabled value="">a disabled option</option>
  <option value="1">1</option>
  <option selected value="2">2</option>
</select>

Only the option with the value of 0 is submitted which is the the only option that appears before the selected disabled option.

I think that all of the other browsers (including IE 11) ignore the selected disabled option and submit all of the selected options (0 and 2 in this example).

The standards don’t seem to address the specific selected disabled case so I think that having such an option shouldn’t “break” the control, but the browser developers may have better arguments.

Here’s a full JSFiddle in case you’d like to try it immediately: https://jsfiddle.net/argaz/gf1fuvu2/

Attachments

1 attachment

Comments and activity

  • Microsoft Edge Team

    Changed Assigned To to “Steven K.”

  • Hi Evgeny,

    Can you tell me the use case for this?  For example, what would break by not allowing a disabled select option.

    I tested in Edge and in Chrome and am getting an HTTP 403 error “CSFR verfication failed.”  I believe that is a different issue.  Can you update the repro in jsfiddle to call a basic javascript method.  I want to make sure we are seeing the same issue.

    Appreciate the help,

    Steve

  • My personal use case was kind of a coding error because I was using a UI framework that “styles” the select element by hiding the actual select and displaying other elements as the select (http://materializecss.com/forms.html#select) and I used their documentation example which had a selected disabled option as the placeholder option. I feel like it’s an easy mistake to make because the selected disabled option is a common template for single select and it’s pretty easy to convert a single select to multiple select by just adding the multiple attribute.

    A more legitimate case I can think of is having the select display an actual user option that has to be selected (I don’t consider it particularly user friendly but I think that it should be legal). For example:

    Choose what applies to you
    
    
      Citizen
    
      Student
    
      Senior
    
      Veteran
    
    
    
    

    Don’t worry about the “CSRF” error in the fiddle, The form is still submitted and you can look at what’s being submitted using Dev Tools.

  • looks like my html example in the comment got filtered, here’s the encoded version:

    <label>Choose what applies to you</label>
    <select multiple>
      <option selected disabled>Citizen</option>
      <option>Student</option>
      <option>Senior</option>
      <option>Veteran</option>
    </select>
    
  • looks like my html example in the comment got filtered, here’s the encoded version:

    <label>Choose what applies to you</label>
    <select multiple>
      <option selected disabled>Citizen</option>
      <option>Student</option>
      <option>Senior</option>
      <option>Veteran</option>
    </select>
    
  • I appreciate the detailed response about the use cases and wanted to let you know I haven’t forgotten about this.

  • Microsoft Edge Team

    Changed Status to “Confirmed”

  • Wow, I finally figured out what’s causing the problem we have…
    We use a disabled and selected option at top of our multi-select options for our styling in a user form. All the other answers from other selects (not multi-select) were submitted in the form, except the answers in the multi-select dropdown for users using Edge.

    Here is another jsfiddle that shows the problem: http://jsfiddle.net/iprytz/74oawewj/

  • @Isak, thank you for the repro and comment.  I like the httpbin.org test site.  That is great.

    I ran the testing with both repros.  Isak’s and evgeny’s using the debugger.  In 16299.192 and in a very recent development build this is working, I.e. the selected option above the disabled option and the option after the disabled option are being sent.

    Will you provide the extended version of Windows 10 you are using?  Win + S and type “winver” and hit enter.  I know this was reported, however, since this ticket was created this might have been fixed.  See the attached screenshot on 16299.192.

    Steve

  • Ok, interesting. Here are the versions that I’m using:

    Microsoft Edge 41.16299.15.0
    Microsoft EdgeHTML 16.16299

    Win 10 version 1709
    OS Build 16299.125

  • The extended version of Windows 10 is the most useful data point here.  I tested with the same EdgeHTML and Edge version as you, however, our Win 10 patch levels are different.  I believe you should see this corrected very soon.  Have you checked for updates recently?

  • Did that not too long ago, a couple of weeks or so. We are experiencing this problem with a lot of customers also. We log the user agent and every user with this string:
    “Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299”
    have the same problem.

  • The UA String does not contain the last digit of the extended release number.  I.e. the xxx in 16.16299.xxx.  For the users still having this issue can you verify their release number?  This issue should be resolved once the updates from 16299.192 or later are installed.

    Do you have access to a machine running 16299.192 or later to verify the fix?

    Steve

  • Microsoft Edge Team

    Changed Status from “Confirmed” to “Fixed”

    Changed Assigned To to “James M.”

You need to sign in to your Microsoft account to add a comment.

Sign in