Tailwind Elements - Select With Custom Features

[enterprisesolutions-ai]

I'm currently working on a project that involves creating a dynamic select element with some custom features. Instead of using images within the select options, I'd like to include an edit button or any action element for the user to edit a specific entry. I've successfully added the edit button to the left of the option text. However, I've encountered an issue where clicking the edit button causes the options dropdown to close. Is there a way to prevent this and replace the innerHTML of the selected option when the edit button is clicked?

[juujisai]

Unfortunately, select has no option that would allow to keep the dropdown open after option click. As of the update of the content for options, you would have to dispose the instance first and then initialize it again.

[enterprisesolutions-ai]

I've discovered a method to prevent it from closing by setting SelectInstance._isOpen = false. However, I'm encountering an issue when I dispose of the 'select' and create a new instance using Select.getOrCreateInstance(SELECT_ELEMENT). The new instance is created, but it seems that the data-te-select-custom-content-ref is not added in the new instance. Can you assist with this matter? Thank you in advance.

[juujisai]

I see that the custom content div is beeing removed after calling the dispose method. We will discuss whether it should be changed.

As a workaround I found that we can add the custom content via JS as a template. I think it works fine then. Checkout the code below

import { Select, initTE } from "tw-elements"

const customContentTemplate = `
<button
  class="inline-block rounded bg-primary px-4 pb-[5px] pt-[6px] text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
  data-te-ripple-init
  data-te-ripple-color="white">
  Save
</button>
`;

const applyCustomContent = () => {
  const div = document.createElement("div");
  div.classList.add("p-4");
  div.setAttribute("data-te-select-custom-content-ref", "");
  div.innerHTML = customContentTemplate;

  document.body.appendChild(div);
};

applyCustomContent();

initTE({ Select });

const id = "select-1";
const select = document.getElementById(id);

const instance1 = Select.getOrCreateInstance(select);

instance1.dispose();

applyCustomContent();

Select.getOrCreateInstance(select);