BUG: Dropdown Menu Not Expanding to Fit Content During Tour

[RutikKulkarni]

Hii @elrumordelaluz
In the ColorDropdown component, when the dropdown menu is opened, it doesn't expand to fit the size of the content or align properly with the selected area. As a result, the options in the dropdown are not selectable during the tour, causing an issue with user interaction.

Steps to Reproduce:

1. Open the app and trigger the tour functionality.
2. Navigate to the section with the color selector dropdown.
3. Observe that the dropdown does not open correctly or adjust the size based on the content.
4. The menu options cannot be selected while the tour is active.

Expected Behavior:

• The dropdown should expand dynamically to fit the size of its content.
• The selected area should adjust accordingly, ensuring the user can interact with the dropdown options while the tour is running.

Code Reference:

const ColorDropdown: React.FC<{
  brushColor: "white" | "#CDCDCD" | "black";
  setBrushColor: React.Dispatch<React.SetStateAction<"black" | "white" | "#CDCDCD">;
}> = React.memo(({ brushColor, setBrushColor }) => {
  const [isOpen, setIsOpen] = useState(false);
  const toggleDropdown = () => {
    setIsOpen(!isOpen);
  };

  // background color logic
  let backgroundColorClass = "bg-white";
  if (brushColor === "black") {
    backgroundColorClass = "bg-black";
  } else if (brushColor === "#CDCDCD") {
    backgroundColorClass = "bg-gray-300 ";
  }

  return (
    <div
      id="draw-color-selector"
      className="relative flex-grow flex hard-coded-height-button"
    >
      {/* Dropdown Tab */}
      <div
        className="flex-grow flex items-center justify-center bg-white p-[4px] rounded-lg cursor-pointer hover:bg-gray-200 transition duration-150"
        onClick={toggleDropdown}
      >
        <div className="flex justify-center items-center">
          <span className="text-gray-700 text-sm flex items-center gap-[2px]">
            <div
              className={`w-[14px] h-[14px] ${backgroundColorClass} border rounded`}
            ></div>
            {brushColor === "#CDCDCD"
              ? "Gray"
              : brushColor.substring(0, 1).toUpperCase() +
                brushColor.substring(1)}
            <FaChevronDown
              className={`ml-1 transform transition-transform ${
                isOpen ? "rotate-180" : "rotate-0"
              }`}
            />
          </span>
        </div>
      </div>

      {/* Dropdown Menu */}
      {isOpen && (
        <div
          className="absolute top-full mt-2 bg-white border rounded-lg shadow-md p-1 w-full "
          style={{ zIndex: 100 }}
        >
          <ul>
            <li
              className="p-2 hover:bg-gray-100 cursor-pointer"
              onClick={() => {
                setBrushColor("black");
                setIsOpen(false);
              }}
            >
              Black
            </li>
            <li
              className="p-2 hover:bg-gray-100 cursor-pointer"
              onClick={() => {
                setBrushColor("#CDCDCD");
                setIsOpen(false);
              }}
            >
              Gray
            </li>
            <li
              className="p-2 hover:bg-gray-100 cursor-pointer"
              onClick={() => {
                setBrushColor("white");
                setIsOpen(false);
              }}
            >
              White
            </li>
          </ul>
        </div>
      )}
    </div>
  );
});

Screenshots:

Suggested Solution:

• Ensure the dropdown's parent or container element adjusts its height dynamically based on the dropdown content size.

• If this behavior is already implemented in this, please refer to the relevant documentation or provide suggestions on how to fix the issue.

[RK-peppermintrobotics]

Also we are facing this type of dropdown issue.

We are using:

"@types/reactour": "^1.18.5",
"reactour": "^1.19.4",