From 2ad9475c42d1ecaa0397f84f58ceae0b1bba1042 Mon Sep 17 00:00:00 2001 From: Paul-Xavier Ceccaldi Date: Thu, 24 Oct 2019 10:24:56 +0200 Subject: [PATCH] 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 --- src/components/Alert/doc.mdx | 22 +++++++++++++------- src/components/DatePicker/index.js | 17 +++++++++++++-- src/components/DatePickerPopper/index.js | 9 +++++--- src/components/DateTimePicker/CustomInput.js | 2 +- src/components/Link/doc.mdx | 8 ++++--- src/utils/reservedProps.js | 1 + 6 files changed, 42 insertions(+), 17 deletions(-) diff --git a/src/components/Alert/doc.mdx b/src/components/Alert/doc.mdx index 2235dad39c..df105f770b 100644 --- a/src/components/Alert/doc.mdx +++ b/src/components/Alert/doc.mdx @@ -21,32 +21,38 @@ Simple feedback messages for user actions. Error variant - 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. + + 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. + Warning variant - 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. + + 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. + Success variant - 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. + + 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. + Info variant - 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. + + 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. + diff --git a/src/components/DatePicker/index.js b/src/components/DatePicker/index.js index d09b5670e3..2e7ae22f2f 100644 --- 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 ( handleFocus('date', e)} icon={icon} iconPlacement={iconPlacement} - inputRef={inputRef || ref} + inputRef={inputReference} onReset={handleReset} size={size} /> @@ -101,8 +112,10 @@ export const DatePicker = forwardRef( dateFormat={dateFormat} locale={locale} onChange={handleChange} + onKeyDown={handleKeyDown} placeholderText={placeholderText} - popperContainer={props => DatePickerPopper({ popperZIndex, ...props })} + popperContainer={DatePickerPopper} + popperProps={{ zIndex: popperZIndex }} renderCustomHeader={props => ( )} diff --git a/src/components/DatePickerPopper/index.js b/src/components/DatePickerPopper/index.js index 085499bb3c..7b0139d374 100644 --- 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( - {children}, + {children}, document.querySelector('body') ) : null +} diff --git a/src/components/DateTimePicker/CustomInput.js b/src/components/DateTimePicker/CustomInput.js index 2711ab209d..0b356be1fd 100644 --- a/src/components/DateTimePicker/CustomInput.js +++ b/src/components/DateTimePicker/CustomInput.js @@ -37,7 +37,7 @@ export class CustomInput extends PureComponent { {icon} )} - + {value && ( diff --git a/src/components/Link/doc.mdx b/src/components/Link/doc.mdx index b85a4f5e4d..6e37b58ecb 100644 --- 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` - primary link + + primary link + ## Special case @@ -42,10 +44,10 @@ Use `` with `underline` props to add specific style _(here a border line)_ - + - + see shape component diff --git a/src/utils/reservedProps.js b/src/utils/reservedProps.js index d821c859db..69785459e9 100644 --- a/src/utils/reservedProps.js +++ b/src/utils/reservedProps.js @@ -107,6 +107,7 @@ const customProps = [ 'isSearchable', 'maxSize', 'minRows', + 'popperZIndex', 'renderItem' ]