Proposed changes (including videos or screenshots)

I've implemented an handleOnMouseDown function to manage the visibility of the dropdown menu. This handler also ensures that the dropdown remains unaffected when removing chip items by checking whether the mouseDown event occurred on the Chip component.

For the Anchor component, the onClick prop has been removed, and a custom function, handleBlur, is now assigned to onBlur prop. This function is responsible for hiding the dropdown only when necessary.

To maintain a proper sequence of actions, focusing on the box/anchor is handled separately by the handleClick function assigned as onClick prop

The order of actions is as follows: onMouseDown first, followed by onBlur, and finally onClick.

Issue(s)

Closes #1261

Further comments

The problem happened because the onBlur event, which hides the dropdown when you click outside, runs before the onClick event. So, if you click inside the box, like on the arrow icon, the onBlur event hides the dropdown, and then the onClick event thinks it's hidden and shows it again.

To fix this, I used the onMouseDown event to handle these situations better. Another way is to delay the onBlur function using setTimeout by 100-200ms. This makes sure onBlur only happens after the click is done. I felt the first solution was better, but here's the setTimeout code in case you want to consider it.

    const handleBlur = useEffectEvent(() => {
    // Use setTimeout to allow time for the click event to be processed first
    setTimeout(() => {
      if (visible === AnimatedVisibility.VISIBLE) {
        hide();
      }
    }, 150);
  });