The option contained in a select element isn't dispatch click event shadowdom
Categories
(Core :: DOM: UI Events & Focus Handling, defect, P2)
Tracking
()
People
(Reporter: shangerxin, Assigned: edgar)
References
(Blocks 1 open bug)
Details
Attachments
(2 files)
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:74.0) Gecko/20100101 Firefox/74.0
Steps to reproduce:
As the summary described, the option or select element is not dispatch necessary event after user complete the selection.
Test page:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
var outterContent = <input type="text"/> <button>ok</button> <br/> <label for="gender">gender:</label> <select name="gender"> <option>male</option> <option>female</option> </select>;
var middleContent = `
<hr/>
<div>
<form>
<div>
<label for="username">User name:</label>
<input type="text"/>
</div>
<div>
<label for="password">Password:</label>
<input type="password"/>
</div>
<input type="submit"/>
</form>
</div>
<div>
<a href="#">middle content link</a>
</div>
`;
var deepContent = `
<hr/>
<div>
<h5>deep content</h5>
<textarea id="area">
</textarea>
</div>
`;
var deeperContent = `
<hr/>
<div>
<h5>deeper content</h5>
<table>
<tr>
<td>
<label for="school-name">School name:</label>
</td>
<td>
<input name="school-name" type="text"/>
</td>
</tr>
<tr>
<td>
<label for="city">City:</label>
</td>
<td>
<select name="city">
<option>Please choose an city name</option>
<option>Beijing</option>
<option>Moscow</option>
<option>Tel Aviv</option>
<option>New york</option>
</selct>
</td>
</tr>
</table>
</div>
`
var attach = function(rootElem, content){
var div = document.createElement('div');
div.innerHTML = content;
rootElem.shadowRoot.appendChild(div);
};
window.onload = function(){
var root = document.querySelector('#root');
root.attachShadow({mode:"open"});
attach(root, outterContent);
var middleDiv = document.createElement('div');
root.shadowRoot.appendChild(middleDiv);
middleDiv.attachShadow({mode:"open"});
attach(middleDiv, middleContent);
var innerDiv = document.createElement('div');
middleDiv.shadowRoot.appendChild(innerDiv);
innerDiv.attachShadow({mode:"open"});
attach(innerDiv, deepContent);
var btnClear = document.createElement('button');
btnClear.innerText = "Clear";
btnClear.addEventListener('click', function(){
var root = btnClear.getRootNode();
if(root){
var area = root.querySelector('#area');
if(area){
area.value = "";
}
}
});
innerDiv.shadowRoot.appendChild(btnClear);
var deeperDiv = document.createElement('div');
innerDiv.shadowRoot.appendChild(deeperDiv);
deeperDiv.attachShadow({mode:"open"});
attach(deeperDiv, deeperContent);
document.addEventListener('click', function(e){
console.log('root clicked', e, e.target, e.composedPath());
}, true);
};
</script>
<div>
<h1>Normal content</h1>
<div>
<label for="book-types">Book types:</label>
<select name="book-types">
<option>Please select book types</option>
<option>Biograph</option>
<option>Fiction</option>
<option>Industry Technology</option>
<option>Journal</option>
</select>
</div>
</div>
<hr>
<h1>
Deeper
</h1>
<div id="root">
</div>
</body>
</html>
Actual results:
- Click the three select elements in the page
- Check the console output
- Only the one outside of shadow dom will dispatch the click event
- The other two don't dispatch anything. The listener of document cannot receive click notification
Expected results:
All the three select elements should dispatch same events no matter they are contained in a shadow dom or not.
|
Reporter | |
Comment 1•4 years ago
|
||
|
|
Reporter | |
Comment 2•4 years ago
|
||
The test web page is also uploaded.
|
||
Comment 3•4 years ago
|
||
Hi,
I was able to reproduce the issue on Firefox 75.0 and Firefox 77.0a1
I'm setting a component in order to involve the development team in reviewing the issue.
Thank you for reporting!
|
||
Updated•4 years ago
|
|
||
Comment 5•4 years ago
|
||
Probably these events should be marked as composed, if they're not.
|
Assignee | |
Comment 6•4 years ago
|
||
(In reply to Emilio Cobos Álvarez (:emilio) from comment #5)
Probably these events should be marked as composed, if they're not.
Thanks for the link :)
|
|
Assignee | |
Comment 7•4 years ago
|
||
Pushed by echen@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/48c892fbba3c Mouse event on <select> elements should be composed; r=mconley
|
||
Comment 9•4 years ago
|
||
| bugherder | ||
|
||
Updated•4 years ago
|
|
||
Comment 10•4 years ago
|
||
Confirmed issue with 76.0a1 (2020-04-06) on macOS 10.15.3.
Fix verified with 77.0b2 on macOS 10.15.3, Windows 10, Ubuntu 20.
Description
•