RangeError: Maximum call stack size exceeded. On IOS/MAC devices.

[khaziq-sfy034]

Prerequisites

• I am running the latest version
• I checked the documentation and found no answer
• I checked to make sure that this issue has not already been filed

💥 Demo Page

neuralCords.ai

Explanation

• What is the expected behavior?
  Should be able to add tag through dropdown dynamically no matter which device user has.

• What is happening instead?
  Tag only gets added once if user does not type any text. If text is added, then clicking on tag does nothing.

• What error message are you getting?
  RangeError: Maximum call stack size exceeded.

So I was using tagify in my react project locally on windows machine, everything was working as expected. Once pushed to production I opened my web app on IOS device (chrome), and tried to test the functionaly (adding tags using the dropdown dynamically) but it was not working. Then I used tested it on MAC, chrome was working fine but then I switched to safari and again not working there checked the developer tools and saw this error:

This is weird as on MAC (chrome works, safari does not), IOS not working on any browser. Android/Windows works perfect.
I have shared the production website link you can test the complete functionality of the tts wizard the second section on the landing page.

Below is my react component code:

import { useState, useRef } from "react";
import { MixedTags } from "@yaireo/tagify/dist/react.tagify";
import DropDownMenu from "./DropDownMenu";

const FreeTTS = () => {
  const tagifyRef = useRef();
  const [limit, setLimit] = useState(0);
  const [text, setText] = useState("");
  const [disabled, setDisabled] = useState(true);
    const handleChange = (e) => {
    setText(e.detail.value);
    if (e.detail.value.length < 0) {
      setLimit(0);
      setDisabled(true);
    }
  };

  const handleInput = (e) => {
    const total = e.detail.textContent.length;
    setLimit(total);
    if (total > 100 || total === 0) {
      setDisabled(true);
    } else {
      setDisabled(false);
    }
  };
  
const selectOption = (type, value) => {
if (value === "") return;
let title = `${type === "pause" ? "[Pause=" : "["}` + value + "]";
value = `${type === "pause" ? "Pause=" : ""}` + value;

var tagElm = tagifyRef.current.createTagElem({
      value,
      title,
    });
 tagifyRef.current.injectAtCaret(tagElm);
var elm = tagifyRef.current.insertAfterTag(tagElm);
tagifyRef.current.placeCaretAfterNode(elm);
setLimit(limit + value.length);
};
  
  return (
    <>
     <DropDownMenu
            label="Add Pause"
            id="pauses-button"
            menu="pauses-menu"
            data={pauseList}
            setData={selectOption}
            type="pause"
          />
         
      <MixedTags
          placeholder="Enter Text"
          tagifyRef={tagifyRef}
          settings={{
            mode: "mix",
            duplicates: true,
            pattern: /^.*$/,
          }}
          onChange={handleChange}
          onInput={handleInput}
        />      
    </>
  )  
}

[yairEO]

can you please create a minimal JSBIN (React has probably nothing to do with this issue) and test again and put here the link? it would help tremendously as I am quite busy

I also don't have a Mac and definitely not Safari so I would have to use BrowserStack to debug this

[khaziq-sfy034]

The issue only rises on IOS/MAC so creating a JSBIN wouldn't help. You need to test on mac.
But still sharing the JSBIN:
https://jsbin.com/zakuxagule/6/edit?html,js,console,output

[yairEO]

what do you mean JSBIN wouldn't help. You need to test on mac.??

Mac can open a jsbin url, it's not blocked

[yairEO]

cannot reproduce:

https://live.browserstack.com/dashboard#os=OS+X&os_version=Sonoma&browser=Safari&browser_version=17.3&zoom_to_fit=true&full_screen=true&url=www.google.com&speed=1&host_ports=google.com%2C80%2C0

[khaziq-sfy034]

I just figured out that the custom designed dropdown in not working with it, I don't know why but simple html select is working accurately and that is weird as both are passing the same value to the add tag function.

[khaziq-sfy034]

One more thing how I can make the mixed tags input resizeable and scroll able?
Like I want to fix the height of the textarea and when the text overflows, I want to enable scroll and text area resize.
Currently the mixed tags does not have a resize option it just keeps on increasing it's height based on the number of new lines

[yairEO]

Well this is unrelated to Tagify at all. This is basic CSS:

https://jsbin.com/nizehom/edit?css,output