How to implement a hidden 'dropdown' layer in a function by clicking a button in React JS

[shiheme]

Summary

This is a usage issue, it's not a bug

Steps to Reproduce

I want to implement it in React JS components. in the popup layer, enter the content and click the 'insert' button to hide the popup layer. I am in the document https://preline.co/plugins/html/dropdown.html#js -I don't understand how to use it in React in Methods,

if (dropdownRef.current) {
      const dropdownMenu = dropdownRef.current.querySelector('.hs-dropdown-menu') as HTMLElement;;
      if (dropdownMenu) {

        new window.HSDropdown.close(dropdownMenu)
      }
    }

Here is my completed code

import React, { useState, useRef, useEffect } from 'react';
interface DropdownMenuProps {
  id: string;
  label: string;
  placeholder: string;
  onInsert: (value: string) => void;
}

const DropdownMenu: React.FC<DropdownMenuProps> = ({ id, label, placeholder, onInsert }) => {
  const [inputValue, setInputValue] = useState('');
  const dropdownRef = useRef<HTMLDivElement | null>(null);

  const handleInsert = () => {
    if (inputValue.trim() === '') {
      return;
    }

    onInsert(inputValue);
    setInputValue('');


    if (dropdownRef.current) {
      const dropdownMenu = dropdownRef.current.querySelector('.hs-dropdown-menu') as HTMLElement;;
      if (dropdownMenu) {

        new window.HSDropdown.close(dropdownMenu)
      }
    }
  };

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(e.target.value);
  };

  return (
    <>
      <div ref={dropdownRef} className="hs-dropdown [--auto-close:inside]  [--placement:top-left] relative inline-flex" data-hs-dropdown-auto-close="inside">
        <div className="inline-flex hs-tooltip">
          <button
            type="button"
            id={id}
            aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown"
            className="hs-dropdown-toggle hs-tooltip-toggle inline-flex accent-btn shrink-0 justify-center items-center size-10 rounded-full text-gray-500"
          >
            <i className={`i-ri-${id} !size-5`}></i>
            <span
              className="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded shadow-sm dark:bg-neutral-700"
              role="tooltip"
            >
              {label}
            </span>
          </button>
        </div>
        <div
          className="hs-dropdown-menu transition-[opacity,margin] duration hidden min-w-[380px] bg-white shadow-dropdown rounded-2xl mt-2 dark:bg-neutral-800 dark:border dark:border-neutral-700"
          role="menu"
          aria-orientation="vertical"
          aria-labelledby={id}
        >
          <div className="p-4">
            <div className="max-w-sm space-y-3">
              <div>
                <label htmlFor={`hs-inline-${id}`} className="block text-sm font-medium mb-2 dark:text-white">{label}</label>
                <div className="flex relative">
                  <input
                    type="text"
                    id={`hs-inline-${id}`}
                    name={`hs-inline-${id}`}
                    className="py-2 px-2 ps-16 block w-full border border-gray-200 shadow-sm rounded-lg text-sm focus:z-10 focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600"
                    placeholder={placeholder}
                    value={inputValue}
                    onChange={handleInputChange}
                  />
                  <div className="absolute inset-y-0 start-0 flex items-center pointer-events-none z-20 ps-4">
                    <span className="text-sm text-gray-500 dark:text-neutral-500">{id === 'link' ? 'https://' : '#小程序://'}</span>
                  </div>
                  <button
                    type="button"
                    className="absolute inset-y-0 end-0 z-20 shrink-0 py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-e-md border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none"
                    onClick={handleInsert}
                  >
                    插入
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default DropdownMenu;

Demo Link

https://preline.co/plugins/html/dropdown.html#js-methods

Expected Behavior

I hope to receive code implemented in React. js

Actual Behavior

No response

Screenshots

No response