Comments (3)
I've managed to create a demo page on JSFiddle which consistently reproduces the problem in Firefox:
If you keep the console open and click the button, you will see that document.getSelection()
is always returning null
in the hidden <iframe>
, and Tagify generates an error:
12:15:53.173 Uncaught TypeError: i is null
setRangeAtStartEnd https://cdn.jsdelivr.net/npm/@yaireo/tagify:34
addTags https://cdn.jsdelivr.net/npm/@yaireo/tagify:34
loadOriginalValues https://cdn.jsdelivr.net/npm/@yaireo/tagify:34
Z https://cdn.jsdelivr.net/npm/@yaireo/tagify:34
<anonymous> about:srcdoc:34
EventListener.handleEvent* about:srcdoc:30
tagify:34:54799
If you click the button again, the iframe will be displayed, and you will see that the input is non-functional.
This only seems to happen if the input has an initial value, and the iframe is not visible when the content page loads. If you remove the initial value, no error is generated.
Interestingly, the demo doesn't error in Chrome.
from tagify.
Looks like this is a Firefox "feature":
827585 - window.getSelection() returns null for hidden iframe
That was reported in 2013, and hasn't been updated since October 2022.
from tagify.
Thanks for the detailed report.
I've just voted on the bug, and so should you, in hope this will speed it having a fix:
(I saw you commented there, which is very good)
Since this is a browser bug (as Tagify is a very very complex component I've seen many browser bugs involved in different scenarios and it is quite frustrating), I cannot do much here. It's up to the implementation developer (you) to come up with a workaround.
Great job investigating this and finding the Firefox bug page!
from tagify.
Related Issues (20)
- Multiple init Tagify HOT 1
- Sprockets error in Rails 7 due to filename change in v4.25.0
- prop-type error HOT 16
- Clicking outside doesn't close dropdown in select mode and tagX class is blank
- Options not filtered in select mode, userInput=true and tagX='' HOT 1
- in 4.26.2 value cannot be non-string in users-list example
- A double tag is created for delimiter when typed HOT 3
- react.tagify.jsx Failed to compile HOT 4
- Ignore an email address in the middle of an sentence HOT 1
- Tagify selct mode incorrect behavior HOT 7
- React className property supports only one class
- "Uncaught (in promise) TypeError: t is null" when pressing Tab key with empty input and dropdown is shown
- default highlighting of selected value in single-select mode in the dropdown HOT 5
- autoComplete.rightKey = true, mode = null (Default), two problems with the rightKey behavior
- We Insert HTML Tags Or some text between '<' and '>' its remove from textarea when edit HOT 2
- On mobile device keyboard automatically adds space after dot type so it's not possible to write an email to tag
- Curly braces not working for tags even with mixTagsInterpolator in settings HOT 2
- Tagify cannot be compiled with Vite HOT 11
- Prevent new lines at all in tagify input HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tagify.