Mobile Safari select input element changing focus to another select input element changes value to index of previous

Question

Created Dec ’20

Replies 2

Boosts 0

Views 3.3k

Participants 3

In an HTML form with 2 <select> inputs if the user selects one and scrolls the native UI to index 1 then clicks the second <select> input that second input will fire an onchange event as if the user selected index 1 (from the previous element)

Code Block language<html>
  <head>
    <script>
      function onChange(e) {
        console.log("ONCHANGE")
        console.log(e.value)
      }
    </script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <form>
      <select onchange="onChange(this)">
        <option>A</option>
        <option>B</option>
        <option>C</option>
      </select>
      <br/>
            <br/>
            <br/>
      <select onchange="onChange(this)">
        <option>1</option>
        <option>2</option>
        <option>3</option>
      </select>
    </form>
  </body>
</html>

The expected result is that if a user selects a second <select> element it should not fire an onchange event until the user has confirmed it or clicked off of it, and it should not be changing the value to the index of the previous <select> input.

Boost

Answer 1

kaysiegert OP

Dec ’20

I have the same problem.

0

Answer 2

Maxoid OP

Mar ’21

Have the same issue. Any workaround?

0