fix: double click on datepicker popper to select date (#408)

* disable autocomplete https://trello.com/c/ZoHydMQR/167-datetimepicker-issue Signed-off-by: Paul-Xavier Ceccaldi <[email protected]>
WTTJ · Oct 24, 2019 · 2ad9475 · 2ad9475 · vercel · Oct 24, 2019
1 parent 3951c24
commit 2ad9475
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 17 deletions.
diff --git a/src/components/Alert/doc.mdx b/src/components/Alert/doc.mdx
@@ -21,32 +21,38 @@ Simple feedback messages for user actions.
   <Box>
     <Alert>
       <AlertTitle>Error variant</AlertTitle>
-      <span>Nunc laoreet egestas nulla, et dapibus sem malesuada in. Suspendisse eleifend accumsan ultrices. Phasellus iaculis nisi sed dui ornare commodo. Nullam dapibus varius nibh a ornare.</span>
+      <span>
+        Nunc laoreet egestas nulla, et dapibus sem malesuada in. Suspendisse eleifend accumsan ultrices. Phasellus iaculis nisi sed dui ornare commodo. Nullam dapibus varius nibh a ornare.
+      </span>
     </Alert>
   </Box>
 
 <Box mt="xl">
   <Alert variant="warning">
     <AlertTitle>Warning variant</AlertTitle>
-    <span>Nunc laoreet egestas nulla, et dapibus sem malesuada in.
-    Suspendisse eleifend accumsan ultrices. Phasellus iaculis nisi sed dui ornare commodo. Nullam
-    dapibus varius nibh a ornare.</span>
+    <span>
+      Nunc laoreet egestas nulla, et dapibus sem malesuada in. Suspendisse eleifend accumsan
+      ultrices. Phasellus iaculis nisi sed dui ornare commodo. Nullam dapibus varius nibh a ornare.
+    </span>
   </Alert>
 </Box>
 
 <Box mt="xl">
   <Alert variant="success">
     <AlertTitle>Success variant</AlertTitle>
-    <span>Nunc laoreet egestas nulla, et dapibus sem malesuada in.
-    Suspendisse eleifend accumsan ultrices. Phasellus iaculis nisi sed dui ornare commodo. Nullam
-    dapibus varius nibh a ornare.</span>
+    <span>
+      Nunc laoreet egestas nulla, et dapibus sem malesuada in. Suspendisse eleifend accumsan
+      ultrices. Phasellus iaculis nisi sed dui ornare commodo. Nullam dapibus varius nibh a ornare.
+    </span>
   </Alert>
 </Box>
 
   <Box mt="xl">
     <Alert variant="info">
       <AlertTitle>Info variant</AlertTitle>
-      <span>Nunc laoreet egestas nulla, et dapibus sem malesuada in. Suspendisse eleifend accumsan ultrices. Phasellus iaculis nisi sed dui ornare commodo. Nullam dapibus varius nibh a ornare.</span>
+      <span>
+        Nunc laoreet egestas nulla, et dapibus sem malesuada in. Suspendisse eleifend accumsan ultrices. Phasellus iaculis nisi sed dui ornare commodo. Nullam dapibus varius nibh a ornare.
+      </span>
     </Alert>
   </Box>
 </Playground>

diff --git a/src/components/DatePicker/index.js b/src/components/DatePicker/index.js
@@ -39,6 +39,7 @@ export const DatePicker = forwardRef(
 
     const [focused, setFocused] = useState((autoFocus && 'date') || null)
     const [date, setDate] = useState(formatDate(value))
+    const inputReference = inputRef || ref
 
     // format date at component mount
     useEffect(() => {
@@ -56,6 +57,8 @@ export const DatePicker = forwardRef(
       //eslint-disable-next-line
     }, [value])
 
+    const blur = () => inputReference.current.blur()
+
     const handleFocus = e => {
       setFocused('date')
       onFocus && onFocus(e)
@@ -66,8 +69,15 @@ export const DatePicker = forwardRef(
       onBlur && onBlur(e)
     }
 
+    const handleKeyDown = e => {
+      if (e.key === 'Escape') {
+        blur()
+      }
+    }
+
     const handleReset = e => {
       e.preventDefault()
+      blur()
       setDate(null)
       onChange && onChange()
     }
@@ -83,6 +93,7 @@ export const DatePicker = forwardRef(
 
     return (
       <S.DatePicker
+        autoComplete="off"
         calendarClassName="date-picker-popper"
         customInput={
           <CustomInput
@@ -93,16 +104,18 @@ export const DatePicker = forwardRef(
             handleFocus={e => handleFocus('date', e)}
             icon={icon}
             iconPlacement={iconPlacement}
-            inputRef={inputRef || ref}
+            inputRef={inputReference}
             onReset={handleReset}
             size={size}
           />
         }
         dateFormat={dateFormat}
         locale={locale}
         onChange={handleChange}
+        onKeyDown={handleKeyDown}
         placeholderText={placeholderText}
-        popperContainer={props => DatePickerPopper({ popperZIndex, ...props })}
+        popperContainer={DatePickerPopper}
+        popperProps={{ zIndex: popperZIndex }}
         renderCustomHeader={props => (
           <CustomHeader endYear={endYear} locale={locale} startYear={startYear} {...props} />
         )}

diff --git a/src/components/DatePickerPopper/index.js b/src/components/DatePickerPopper/index.js
@@ -3,10 +3,13 @@ import { createPortal } from 'react-dom'
 
 import * as S from './styles'
 
-export const DatePickerPopper = ({ children, popperZIndex }) =>
-  typeof window !== 'undefined'
+export const DatePickerPopper = props => {
+  const { children } = props
+  if (!children) return null
+  return typeof window !== 'undefined'
     ? createPortal(
-        <S.Popper zIndex={popperZIndex}>{children}</S.Popper>,
+        <S.Popper {...children.props}>{children}</S.Popper>,
         document.querySelector('body')
       )
     : null
+}
diff --git a/src/components/DateTimePicker/CustomInput.js b/src/components/DateTimePicker/CustomInput.js
@@ -37,7 +37,7 @@ export class CustomInput extends PureComponent {
             {icon}
           </IconWrapper>
         )}
-        <input autoComplete="new-password" ref={inputRef} value={value} {...rest} />
+        <input ref={inputRef} value={value} {...rest} />
         {value && (
           <IconWrapper iconPlacement="right" size={size}>
             <ClearButton aria-label="clear date" onClick={onReset} />

diff --git a/src/components/Link/doc.mdx b/src/components/Link/doc.mdx
@@ -32,7 +32,9 @@ Can be `primary` by default or `secondary`
 It can also be `disabled`
 
 <Playground>
-  <Link disabled href="#">primary link</Link>
+  <Link disabled href="#">
+    primary link
+  </Link>
 </Playground>
 
 ## Special case
@@ -42,10 +44,10 @@ Use `<Text>` with `underline` props to add specific style _(here a border line)_
 <Playground>
   <Box>
     <Link as={LinkDocz} to="/components/shape" variant="secondary">
-      <Shape width="30px" height="30px" shape="circle">
+      <Shape height="30px" shape="circle" width="30px">
         <img src="https://avatars3.githubusercontent.com/u/13100706?s=200&v=4" />
       </Shape>
-      <Text as="span" variant="body2" underline>
+      <Text as="span" underline variant="body2">
         see shape component
       </Text>
     </Link>

diff --git a/src/utils/reservedProps.js b/src/utils/reservedProps.js
@@ -107,6 +107,7 @@ const customProps = [
   'isSearchable',
   'maxSize',
   'minRows',
+  'popperZIndex',
   'renderItem'
 ]