fix color picker in safari

brandon-pereira · Feb 8, 2024 · d8b40d1 · d8b40d1
1 parent cffb1e0
commit d8b40d1
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 22 deletions.
diff --git a/src/components/ColorPicker/ColorPicker.styles.ts b/src/components/ColorPicker/ColorPicker.styles.ts
@@ -45,6 +45,14 @@ export const Color = styled.button.attrs(props => ({
     `};
 `;
 
+export const TooltipContainer = styled.div`
+    position: relative;
+    height: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+`;
+
 export const LabelContainer = styled.div`
     display: flex;
     margin-bottom: 0.5rem;

diff --git a/src/components/ColorPicker/ColorPicker.tsx b/src/components/ColorPicker/ColorPicker.tsx
@@ -1,7 +1,13 @@
 import { useState, useEffect, useCallback, useRef } from 'react';
 import randomColor from 'randomcolor';
 
-import { Icon, Container, Color, LabelContainer } from './ColorPicker.styles';
+import {
+    Icon,
+    Container,
+    Color,
+    LabelContainer,
+    TooltipContainer
+} from './ColorPicker.styles';
 
 import Refresh from '@components/Icon/svgs/refresh.svg';
 import Eyedropper from '@components/Icon/svgs/eyedropper.svg';
@@ -67,6 +73,8 @@ function ColorPicker({ value, onChange }: Props) {
                 e.preventDefault();
             }
             if (inputColorRef.current) {
+                console.log('HERE');
+                inputColorRef.current.focus();
                 inputColorRef.current.click();
             }
         },
@@ -99,28 +107,41 @@ function ColorPicker({ value, onChange }: Props) {
                 >
                     Refresh Palette
                 </Icon>
-                <Icon
-                    size="1rem"
-                    icon={Eyedropper}
-                    color="currentColor"
-                    onClick={onLaunchPicker}
-                >
-                    Pick a colour
-                </Icon>
+                <TooltipContainer>
+                    <Icon
+                        size="1rem"
+                        icon={Eyedropper}
+                        color="currentColor"
+                        onClick={onLaunchPicker}
+                    >
+                        Pick a colour
+                    </Icon>
+                    <input
+                        ref={inputColorRef}
+                        value={palette[index]}
+                        onChange={e => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            if (
+                                inputColorRef.current &&
+                                inputColorRef.current.value
+                            ) {
+                                onChangeColorFromPicker(
+                                    inputColorRef.current.value
+                                );
+                            }
+                        }}
+                        type="color"
+                        style={{
+                            position: 'absolute',
+                            visibility: 'hidden',
+                            left: '50%',
+                            transform: 'translateX(-50%)'
+                        }}
+                    />
+                </TooltipContainer>
             </LabelContainer>
-            <input
-                ref={inputColorRef}
-                value={palette[index]}
-                onChange={e => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    if (inputColorRef.current && inputColorRef.current.value) {
-                        onChangeColorFromPicker(inputColorRef.current.value);
-                    }
-                }}
-                type="color"
-                style={{ display: 'none' }}
-            />
+
             <Container ref={colorPaletteRef}>
                 {palette.map((color, idx) => (
                     <Color