client/note color picker: fix the custom color picker on Safari

This commit is contained in:
Adorian Doran 2025-11-21 01:29:54 +02:00
parent 36350bd71a
commit e9796c9a35

View File

@ -122,6 +122,7 @@ function CustomColorCell(props: ColorCellProps) {
const colorInput = useRef<HTMLInputElement>(null);
const colorInputDebouncer = useRef<Debouncer<string | null> | null>(null);
const callbackRef = useRef(props.onSelect);
const isSafari = useRef(/^((?!chrome|android).)*safari/i.test(navigator.userAgent));
useEffect(() => {
colorInputDebouncer.current = new Debouncer(500, (color) => {
@ -152,7 +153,12 @@ function CustomColorCell(props: ColorCellProps) {
colorInput.current?.click();
}, [pickedColor]);
return <div style={`--foreground: ${getForegroundColor(props.color)};`}>
return <div style={`--foreground: ${getForegroundColor(props.color)};`}
onClick={(e) => {
// The color picker dropdown will close on Safari if the parent context menu is
// dismissed, so stop the click propagation to prevent dismissing the menu.
isSafari.current && e.stopPropagation();
}}>
<ColorCell {...props}
color={pickedColor}
className={clsx("custom-color-cell", {