Closed Bug 265660 Opened 20 years ago Closed 11 years ago

An option with style="display:none" can be selected using the keyboard

Categories

(Core :: Layout: Form Controls, defect)

Product:
Core
Component:
Layout: Form Controls
Platform:
x86
Windows XP
Type:
defect
Priority:
Not set
Severity:
minor

Tracking

()

Status:
RESOLVED WORKSFORME

People

(Reporter: mozilla-bug, Unassigned)

References

(
URL
)

Details

Attachments

(3 files, 1 obsolete file)

frame1
345 bytes, text/html
Details
frame2
6 bytes, text/html
Details
Frame Set
184 bytes, text/html
Details 
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7) Gecko/20040616
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7) Gecko/20040616

The code below produces an empty list. But the hidden value is shown as the
selected option. Is it a feature or a bug? I think it is a bug.

<select style="width:200px;">
	<option style="display:none;width:200px;">should be hidden</option>
</select>

"Additional Information" gives a more complete example and shows a workaround.

Reproducible: Always
Steps to Reproduce:




<html>
<head>
<title></title>
</head>
<body>
<form action="">
	<fieldset>
		<select name='ex1'>
			<option value='a'>normal case, a is visible, that's ok</option>
			<option value='b' style="display:none">bug or feature, b is selectable using
the keyboard</option>
			<option value='b' style="display:none" disabled="disabled">workaround, c can
not be made visible in the selectbox</option>
		</select>
		<select name='ex2'>
			<option value='a'>normal case, a is visible, that's ok</option>
			<optgroup label="an optgroup" style="display:none;">
				<option value='b'>bug or feature, b is selectable using the keyboard</option>
			</optgroup>
			<optgroup label="an optgroup" style="display:none;" disabled="disabled">
				<option value='c'>workaround, c can not be made visible in the
selectbox</option>
			</optgroup>
		</select>
	</fieldset>
</form>
</body>
</html>
Summary: A option with style="display:none" is displayed. → An option with style="display:none" can be selected using the keyboard
confirming...
Status: UNCONFIRMED → NEW
Ever confirmed: true
It'd help to attach the testcase as an actual attachment....

It's not clear to me what the right behavior is here.  The concept of a selected
option is something that's part of the HTML language, and isn't really
presentational in nature -- that's the option that gets sent to the server.

Perhaps we should simply disallow setting display on options.
Attached file Frame Set (obsolete) — 
Loading pages in frames style.display doesn't work
Attached file frame1 — 
page with style.display
Attached file frame2 — 
Second frame
Attached file Frame Set — 

    
  

        Attachment #172670 -
        Attachment is obsolete: true

    
    

    
  
Comments 3-6 have nothing to do with this bug -- that's a separate issue, that
has been fixed for a while now.  Please don't make unrelated comments like that
on bugs.

    
    

    
  
(In reply to comment #7)
> Comments 3-6 have nothing to do with this bug -- that's a separate issue, that
> has been fixed for a while now.  Please don't make unrelated comments like 
that
> on bugs.

Sorry, I misinterpreted



    
    

    
  
> Perhaps we should simply disallow setting display on options.
Oh no! Please don't make this change.
As I demonstated above, there is a solution for the problem:
<optgroup label="an optgroup" style="display:none;" disabled="disabled">
  <option value='c'>workaround, c can not be made visible in the
selectbox</option>
</optgroup>

I use this method on my website to hide invalid options using java-script:

function hideOption(id) {
	var e = eval(document.getElementById(id));
	e.style.display='none';
	e.disabled='disabled';
}


    
    

    
  
I think the described behaviour is a feature not a bug.
Status: NEW → RESOLVED
Closed: 20 years ago
Resolution: --- → INVALID

    
    

    
  
I'm not so sure about that.
Status: RESOLVED → REOPENED
Resolution: INVALID → ---

    
    

    
  
I'm not sure this is a bug. Setting display:none doesn't remove an element from the DOM, it just hides it from the visual media. (See http://www.w3.org/TR/REC-CSS2/visuren.html#display-prop) Setting the display of an <option> tag to none doesn't remove that option from the select list - it is still bound to the parent select element as an option and thus selectable. If you don't want an item to be selectable at all then you should remove it from the list. I suppose using the disabled attribute should work too, but I haven't tested that. 

    
    

    
  
this is highly related:
if i have some option opt selected and i set opt.style.display = "none" and opt.disabled = "disabled", it still remains selected (visible).

Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US; rv:1.8.0.6) Gecko/20060728 Firefox/1.5.0.6

    
    

    
  
This issue is still present in firefox 3.5.2.

For example when you have this on a website:
<select>
 <option>1</option>
 <option style="display:none;">2</option>
</select>


User can select "2" even tho it's a hidden option. How? well by.. pressing the Down Key on keyboard or by typing "2" on keyboard.

Please have this be fixed, because it is not apply to Radio button or Checkbox inputs, for example hidden radio or checkbox inputs can be selected or set by using arrows. 


for now I'm going to have to write some extra javascript to move the hidden option tags from select, doh'e

    
    

    
  
If you care about this issue, please bring it up in public-html@w3.org.  The HTML language needs to define how this is supposed to work.

    
    

    
  
No longer a issue, Was able to do disable on option tag to solve this issue.

for example if this solution, as suggested by Chris Bloom above:
<select>
 <option>1</option>
 <option style="display:none;" disabled>2</option>
</select>

    
    

    
  
Bug 922082 fixed the problem mentioned in comment 14 (which is unrelated to the reported bug).

The original testcase:

<select style="width:200px;">
	<option style="display:none;width:200px;">should be hidden</option>
</select>

works for me (no text is visible in the select item, nor in the drop-down menu).
Nightly 27.0a1 (2013-10-08) on Linux64.
Status: REOPENED → RESOLVED
Closed: 20 years ago → 11 years ago
Flags: in-testsuite?
Resolution: --- → WORKSFORME

          You need to log in
          before you can comment on or make changes to this bug.
        






  

    
  







  

    

      
Attachment

      

      
      
      
      
    

    

      

        

          

            
General

            

              Creator: 



            

            
Created: 

            
Updated: 

            
Size: