The country flag receives focus before the input when allowDropdown is false

[ehynds]

Plugin version

v23.1.1

Steps to reproduce

1. Load your storybook for the allowDropdown: false option: https://intl-tel-input.com/storybook/?path=/docs/intltelinput--allowdropdown
2. Attempt to tab into the input

Expected behaviour

Tabbing into the input focuses the input. The next tab moves focus to the next form control.

Actual behaviour

The flag container button receives focus before the input. I don't think the flag should be a button element at all when allowDropdown is false because the flag is not actionable. At the very least it should be a disabled button.

Initialisation options

intlTelInput(node, {
  dropdownContainer,
  allowDropdown: false,
  initialCountry: 'us',
  utilsScript: `https://cdn.jsdelivr.net/npm/[email protected]/build/js/utils.js`,
});

[jackocnr]

Thanks for raising this. Yes I agree, when allowDropdown is false, the selected flag should not be a button element, and it should not get tab focus. I don't have time to implement this change myself right now, but would be open to a pull request.