[HxDropdown] The design does not allow to use multiple triggers and multiple contents

[jirikanda]

HxInputDateRange uses

<HxDropdown>
  <HxDropdownTriggerElement /> for input "from"
  <HxDropdownContent /> for calendar "from"
  <HxDropdownTriggerElement /> for input "to"
  <HxDropdownContent /> for calendar "to"
</HxDropdown>

The Open state is held in dropdown although each trigger element should have its own state.

See #294.

[hakenr]

@crdo In other words - our HxDropdown design does not expect to have several HxDropdownTriggerElements in single HxDropdown. Is this a legitimate scenario?

[Harvey1214]

@crdo in Bootstrap v5.2, when there are multiple toggle elements and dropdown menus in a dropdown, the toggle elements always open the first dropdown menu. This introduces issues with regards to HxInputDate and HxInputDateRange.

A possible solution is to separate each toggle element and dropdown menu into its own dropdown as shown in this branch. However, that brings forth some visual issues - box shadow, input group sizing, etc.

[Harvey1214]

@crdo @jirikanda Bootstrap expects only one dropdown menu and toggle element to be present in a dropdown. It worked in previous versions, however, with this PR, it is no longer supported, therefore the HxInputDate and HxInputDateRange components have been modified to use a HxDropdown per each dropdown menu and toggle element.