Picker does not close

I am not able to close the pickers I open by clicking outside the picker element.

This is because I have put the picker in a component which has transform applied to an ancestor. Therefore, the cover element in Picker, which has a position: fixed actually starts behaving like a position: absolute element (transforms change the container element of fixed-pos elements)

[arecvlohe]

I think the easiest way to handle this is to put a wrapper around the color picker, which you already do so that it displays above content around it. Then just apply a onMouseLeave event to close it. I think this is better than having to create refs for each color picker. This will create the onBlur effect which I think is ideal.

components.js

export const ColorPickerWrapper = styled.div`
  position: absolute;
  z-index: 2;
`;

export const ColorPicker = ({ onMouseLeave, onChange, color }) => (
  <ColorPickerWrapper onMouseLeave={onMouseLeave}>
    <BlockPicker color={color} colors={defaultColors} onChangeComplete={onChange} triangle="hide" />
  </ColorPickerWrapper>
);

component.js

{showBorderPicker && (
  <ColorPicker
     color={styles.borderColor}
     onChange={handleChangeStyles(['event', 'styles', 'borderColor'])}
     onMouseLeave={handleShowPicker('showBorderPicker')}
 />
)}

[Dror-Bar]

@liziver Nice trick, thanks for sharing. I had a solution of my own using onMouseEnter and onMouseLeave, but your seems better / simpler.