Change positioningStrategy on window resize

[FrazeColder]

Hey there,

I would like to change the positioningStrategy of the mentions dropdown list. When the window size is greater or than equal to 640px the positioningStrategy should be fixed. However, when the window size is less than 640px the positioningStrategy should be normal.

This is my modules array:

const modules = [
  {
    name: 'mention',
    module: QuillMention,
    options: {
      allowedChars: /^[A-Za-zÄÜÖäüö_-]*$/,
      mentionDenotationChars: ["@"],
      dataAttributes: ['id', 'value', 'avatar'],
      minChars: 1,
      maxChars: 50,
      positioningStrategy: windowWidth.value >= 640 ? 'fixed' : 'normal',
      source: async function (searchTerm, renderList, mentionChar) {
        const response = await fetch('POST', runtimeConfig.public.api.user.search, {search: searchTerm}, true, 'fetch');
        const values = response.data;

        const matches = [];
        let maxListLength = 5;

        if (values.length < 5) {
          maxListLength = values.length;
        }

        for (let i = 0; i < maxListLength; i++) {
          matches.push(values[i]);
        }

        renderList(matches, searchTerm);
      },
    },
  }
];

The variable windowWidth is just a ref variable being refreshed with a window.addEventListener every time the window resizes.

I also reinitialize my quill editor every time fresh, when the window size drops below 640px or becomes greater/equal to 640px. Here is how I do that:

const onResize = () => {
      windowWidth.value = window.innerWidth;

      // Find the mention module
      const mentionModule = modules.find(module => module.name === 'mention');

      // Update the positioningStrategy option
      if (windowWidth.value >= 640) {
        mentionModule.options.positioningStrategy = 'normal';
      } else {
        mentionModule.options.positioningStrategy = 'fixed';
      }

      console.log('mention positioningStrategy:', modules[1].options.positioningStrategy)

      if ((previousWindowWidth.value < 640 && windowWidth.value >= 640) || (previousWindowWidth.value >= 640 && windowWidth.value < 640)) {
        initializeQuill();
      }

      previousWindowWidth.value = windowWidth.value;
    };

And here is my initializeQuill method:

const initializeQuill = () => {
  console.log('Initializing Quill...')

  if(quillInstance.value) {
    quillInstance.value = null;
  }

  // Register each module
  modules.forEach(module => {
    delete Quill.imports[`modules/${module.name}`];
  });

  // Register each module
  modules.forEach(module => {
    Quill.register(`modules/${module.name}`, module.module);
  });

  quillInstance.value = new Quill(`#editor-${props.commentId}`, {
    theme: 'snow',
    modules: {
      toolbar: `#toolbar-${props.commentId}`,
      ...modules.reduce((acc, module) => ({ ...acc, [module.name]: module.options }), {}),
    }
  });

  // TODO (later): Save content in store and restore it when editor is opened again

  quillInstance.value.focus();
  const length = quillInstance.value.getLength();
  quillInstance.value.setSelection(length, length);

  quillInstance.value.on('text-change', () => {
    content.value = quillInstance.value.root.innerHTML;
  });
};

However, the positioningStrategy of the mentions module does not change event though I have reinitialize the editor. How can this be? How can I get a workaround on this to have the mentions list fixed for sizes equal or greater than 640px and normal for sizes less than 640px?

I appreciate any kind of help!
Kind regards.

[FrazeColder]

Update

I have added a minimal working example and as you can see, the position strategy does not change sady: https://codesandbox.io/p/devbox/crazy-flower-dtr2w4