Closed Bug 1628186 Opened 2 years ago Closed 2 years ago

The option contained in a select element isn't dispatch click event shadowdom

Categories

(Core :: DOM: UI Events & Focus Handling, defect, P2)

Unspecified
All
defect

Tracking

()

VERIFIED FIXED
mozilla77
Tracking Status
firefox75 --- wontfix
firefox76 --- wontfix
firefox77 --- verified

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:

  1. Click the three select elements in the page
  2. Check the console output
  3. Only the one outside of shadow dom will dispatch the click event
  4. 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.

The test web page is also uploaded.

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!

Status: UNCONFIRMED → NEW
Component: Untriaged → DOM: UI Events & Focus Handling
Ever confirmed: true
OS: Unspecified → All
Product: Firefox → Core

Edgar, could you take a look on this bug?

Flags: needinfo?(echen)
Priority: -- → P3

Probably these events should be marked as composed, if they're not.

(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: nobody → echen
Flags: needinfo?(echen)
Priority: P3 → P2
Pushed by echen@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/48c892fbba3c
Mouse event on <select> elements should be composed; r=mconley
Status: NEW → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla77

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.

Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.