Radio and Select extra option added on Safari < 13

Reproduction

https://github.com/totalhack/formkit-starter

Describe the bug

On somewhat older versions of Safari, such as Safari 12 which is on my 2017 Macbook Pro, it seems an extra option is added to radio and select inputs. This does not happen in Safari 13 or any recent versions of Chrome/Firefox. I searched and could not find any particular issue or bug report for Safari < 13 that would explain this, so I’m thinking this could be a formkit issue.

The radio in the demo app is defined as follows, with two options:

        <FormKit
          name="opinion"
          label="Opinion"
          help="How excited are you about FormKit?"
          type="radio"
          value="A lot"
          :options="['A little', 'A lot']"
        />

But it renders html like this, with a third blank option added:

<ul class="formkit-options">
   <li class="formkit-option">
      <label class="formkit-wrapper">
         <div class="formkit-inner">
            <!----><input type="radio" class="formkit-input" name="opinion" id="opinion-option-a-little" value="A little"><span class="formkit-decorator" aria-hidden="true"></span><!---->
         </div>
         <span class="formkit-label">A little</span>
      </label>
      <!---->
   </li>
   <li class="formkit-option">
      <label class="formkit-wrapper">
         <div class="formkit-inner">
            <!----><input type="radio" class="formkit-input" name="opinion" id="opinion-option-a-lot" value="A lot"><span class="formkit-decorator" aria-hidden="true"></span><!---->
         </div>
         <span class="formkit-label">A lot</span>
      </label>
      <!---->
   </li>
   <li class="formkit-option">
      <label class="formkit-wrapper">
         <div class="formkit-inner">
            <!----><input type="radio" class="formkit-input" name="opinion"><span class="formkit-decorator" aria-hidden="true"></span><!---->
         </div>
         <!---->
      </label>
      <!---->
   </li>
</ul>

The “modeled group values” output also shows an unusual value, note the __init key being set which doesn’t happen in normal behavior:

{
  "__init": true,
  "opinion": "A lot"
}

Why do I need Safari 12 to work? I’m trying to use formkit in a scenario where I will use the standard module/nomodule pattern to load my “modern” bundle in all browsers that support es6 modules and a more heavily polyfilled bundle to the nomodule browsers. Safari 12 is in the group that supports es6 modules and something I would consider modern enough that it probably should work. Even with polyfills to match es6+ browsers it doesn’t seem to work.

The reproduction link is a copy of of the formkit starter project with some modifications to the postcss behavior and a vite target of es6 to get things close to working in Safari 12. This “extra item” bug is the only thing preventing this from working that I’ve found.

Thanks for taking a look.

Environment

• OS: Mac OS • Browser: Safari • Version: < 13

[justin-schroeder]

Was able to identify the extra option issue. I have not been able to duplicate any non-selection issues. Checking why __init isn’t being hidden. that might be unavoidable.

[totalhack]

Thanks @justin-schroeder. I’ll retest once this is released and let you know if I still hit the radio click issue. I can also work around __init with some filtering before posting if needed.