Clicking on inputs closes Popup in Firefox on OSX

thedevs-network / kutt-extension

🔗✂️ Cross-Browser URL Shortener Extension based on Kutt.it

MIT License

134 stars 36 forks source link

Clicking on inputs closes Popup in Firefox on OSX #91

Closed abhijithvijayan closed 4 years ago

abhijithvijayan commented 4 years ago

This weird behaviour is due to a bug in Firefox on OSX.

Related issues:

https://stackoverflow.com/questions/37207533/why-id-chrome-extension-popup-closing-on-input-autocomplete-suggestion-click
https://github.com/bitwarden/browser/issues/580

Workaround:

Wrap the inputs with label element and set absolute positioning to the input (ref: https://stackoverflow.com/questions/40339951/clicking-on-label-not-working-in-html/40340000)

abhijithvijayan commented 4 years ago

I guess this might work

wrap the input in the label element
absolute position input
block position label
create another div with text input appearance that just shows the input value(this is to hide the input with z-index: -1)

So user can only click on the label which distributes the focus to input so that the user is able to type and the input value in the state is shown through the input lookalike div