Fix the Input clear button on macOS

The button focus behavior is inconsistent across operating systems and browsers. On macOS Firefox and Safari, the Input clear button was broken. A onFocusIn/onFocusOut solution is not possible due to React not supporting it.

- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
- https://zellwk.com/blog/inconsistent-button-behavior/
- facebook/react#6410

docs/changelog/README.md

@@ -3,6 +3,7 @@
 ## Unreleased
 
 - :bug: Let the Image always fit the whole widget.
+- :bug: Fix the Input clear button on macOS.
 - :book: Update documentation.
 
 ## 1.1.3 (2020-01-14)

src/components/forms/input/index.tsx

@@ -26,11 +26,14 @@ const Input: React.FC<Props> = memo(props => {
   } = props;
   const [isFocused, setFocused] = useState(false);
   const { t } = useTranslation();
+  const clearValue = () => setValue("");
   return (
     <Label text={label}>
       <div
         className="w-full relative"
-        onFocus={event => {
+        // replace with onFocusIn / onFocusOut when implemented in React:
+        // https://github.com/facebook/react/issues/6410
+        onFocus={() => {
           setFocused(true);
         }}
         onBlur={event => {
@@ -60,7 +63,8 @@ const Input: React.FC<Props> = memo(props => {
             className="absolute right-0 h-full"
             size={ButtonSize.Small}
             variant={ButtonVariant.Unstyled}
-            onClick={() => setValue("")}
+            onClick={clearValue}
+            onMouseDown={clearValue}
             aria-label={t("common.clear")}
           >
             <Icon name="times" />