'why 'onfocus' does not work on multiple select option, and 'onclick' does?

I do not see why onfocus='myFunction()' works in a an input, but not in an option, for example:

<input type="text" id="fname" onfocus="myFunction()">

calls myFunction when you click on it or when you tab into it, but:

<select multiple>
<option onfocus="myFunction()">whatever</option>
</select>

Does not work when you step in the option.

Why is this? I cannot find a documentation which says what events work on what elements. I have seen this for a long time, but now I want to know why

EDIT: I am using Chrome.

javascripthtmlreactjsanimationframer-motion


Solution 1:[1]

Please look at the MDM web docs

For onfocus to fire on non-input elements, they must be given the tabindex attribute

So in other terms: give the option with the focus event a tabIndex! The example below should work.

function myFunction() {
      console.log("focus");
}

function myFunction2() {
      console.log("focus2");
}
<select multiple>
    <option tabIndex="0" onfocus="myFunction()">whatever</option>
    <option tabIndex="0" onfocus="myFunction2()">whatever2</option>
</select>

Solution 2:[2]

You should be able to use the layoutId prop on the motion component. If both elements have the same layoutId motion will animate the change for you. Also, having a codesandbox or something would be nice to check the code.

You can check out docs here: https://www.framer.com/docs/examples/#shared-layout-animations and here https://www.framer.com/docs/layout-group/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Tycho
Solution 2 Dharman

Related Questions