When using mobile devices due to the way event propagation works and the lack of precision of how touch events are handled, the drag handling event always took precedence over the click even for closing the pop-up dialogs when using mobile devices as the two layers overlapped one another. Because of this I split the header into a two part flex with them handling their own events independently with the dragable portion taking a bulk of the header but no longer overlapping with the close button. (Because of this the title is currently left-aligned as well instead of trying to handle relative positioning to center it once more)
Converted the <input type=color> tag to a normal button to remove weird mobile event handling that was not preventing the default action from performing on click for the input. Now that it's just a standard button there is no default action to be triggered, only the hooked in function will trigger so ev.preventDefault() was also removed as being frivolous. Also by embedding the background color style directly into the JSX component, a useRef hook isn't necessary as the style will update in real time as the color is modified.
Graphic to show flex boundaries representing the event areas:
Graphic showing the new input button:
Edit: Updated to include fix for bug 1 in the same issue
Fixes #709
When using mobile devices due to the way event propagation works and the lack of precision of how touch events are handled, the drag handling event always took precedence over the click even for closing the pop-up dialogs when using mobile devices as the two layers overlapped one another. Because of this I split the header into a two part flex with them handling their own events independently with the dragable portion taking a bulk of the header but no longer overlapping with the close button. (Because of this the title is currently left-aligned as well instead of trying to handle relative positioning to center it once more)
Converted the
<input type=color>tag to a normal button to remove weird mobile event handling that was not preventing the default action from performing on click for the input. Now that it's just a standard button there is no default action to be triggered, only the hooked in function will trigger soev.preventDefault()was also removed as being frivolous. Also by embedding the background color style directly into the JSX component, auseRefhook isn't necessary as the style will update in real time as the color is modified.Graphic to show flex boundaries representing the event areas:
Graphic showing the new input button:
Edit: Updated to include fix for bug 1 in the same issue