From 5c6288bca3fb7c50fbfd015b8ceb228355077870 Mon Sep 17 00:00:00 2001 From: Aurora Scharff Date: Sat, 24 Aug 2024 12:25:40 +0200 Subject: [PATCH 1/5] fix: When escaping or pressing enter inside autocompletes, displayvalue was shown and user could no longer type --- .../react/src/formElements/MdAutocomplete.tsx | 15 ++++++++++----- .../src/formElements/MdMultiAutocomplete.tsx | 15 ++++++++++----- 2 files changed, 20 insertions(+), 10 deletions(-) diff --git a/packages/react/src/formElements/MdAutocomplete.tsx b/packages/react/src/formElements/MdAutocomplete.tsx index cc90b82e..8c4f1d3e 100644 --- a/packages/react/src/formElements/MdAutocomplete.tsx +++ b/packages/react/src/formElements/MdAutocomplete.tsx @@ -71,6 +71,7 @@ const MdAutocomplete = React.forwardRef( const [results, setResults] = useState([]); const dropdownRef = useRef(null); useDropdown(dropdownRef, open, setOpen); + const [focused, setFocused] = useState(false); const autocompleteId = id && id !== '' ? id : uuidv4(); @@ -125,10 +126,10 @@ const MdAutocomplete = React.forwardRef( const displayedOptions = autocompleteValue ? results : defaultOptions && defaultOptions.length - ? defaultOptions - : options - ? options - : []; + ? defaultOptions + : options + ? options + : []; const displayedOptionsSliced = numberOfElementsShown == null ? displayedOptions : displayedOptions.slice(0, numberOfElementsShown); @@ -193,12 +194,15 @@ const MdAutocomplete = React.forwardRef( { + return setFocused(false); + }} aria-expanded={open} aria-controls={`md-autocomplete_dropdown_${autocompleteId}`} id={autocompleteId} aria-describedby={ariaDescribedBy} className={inputClassNames} - value={open ? autocompleteValue : displayValue} + value={focused || open ? autocompleteValue : displayValue} tabIndex={0} onKeyDown={e => { if (e.key === 'Enter') { @@ -217,6 +221,7 @@ const MdAutocomplete = React.forwardRef( } }} onFocus={() => { + setFocused(true); !disabled && setOpen(true); }} type="text" diff --git a/packages/react/src/formElements/MdMultiAutocomplete.tsx b/packages/react/src/formElements/MdMultiAutocomplete.tsx index 8f702a47..653664f3 100644 --- a/packages/react/src/formElements/MdMultiAutocomplete.tsx +++ b/packages/react/src/formElements/MdMultiAutocomplete.tsx @@ -68,6 +68,7 @@ const MdMultiAutocomplete = React.forwardRef([]); const dropdownRef = useRef(null); useDropdown(dropdownRef, open, setOpen); + const [focused, setFocused] = useState(false); const multiAutocompleteId = id && id !== '' ? id : uuidv4(); @@ -147,10 +148,10 @@ const MdMultiAutocomplete = React.forwardRef { + return setFocused(false); + }} + value={focused || open ? autocompleteValue : displayValue} tabIndex={0} onKeyDown={e => { if (e.key === 'Enter') { @@ -240,6 +244,7 @@ const MdMultiAutocomplete = React.forwardRef { + setFocused(true); !disabled && setOpen(true); }} type="text" From c50a712a3d8afc1ab79a7fdfed0d6e84aed40a3c Mon Sep 17 00:00:00 2001 From: Aurora Scharff Date: Thu, 3 Oct 2024 14:40:46 +0200 Subject: [PATCH 2/5] Update --- packages/react/package.json | 2 +- packages/react/src/formElements/MdAutocomplete.tsx | 9 ++------- .../react/src/formElements/MdMultiAutocomplete.tsx | 14 ++------------ packages/react/src/formElements/MdMultiSelect.tsx | 5 ----- packages/react/src/hooks/useDropdown.ts | 4 ++++ 5 files changed, 9 insertions(+), 25 deletions(-) diff --git a/packages/react/package.json b/packages/react/package.json index 902e2c62..f91778f0 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@miljodirektoratet/md-react", - "version": "3.1.0", + "version": "3.7.0", "description": "React-komponenter for Miljødirektoratet", "author": "Miljødirektoratet", "main": "./dist/index.js", diff --git a/packages/react/src/formElements/MdAutocomplete.tsx b/packages/react/src/formElements/MdAutocomplete.tsx index 8c4f1d3e..31bcd779 100644 --- a/packages/react/src/formElements/MdAutocomplete.tsx +++ b/packages/react/src/formElements/MdAutocomplete.tsx @@ -70,8 +70,7 @@ const MdAutocomplete = React.forwardRef( const [autocompleteValue, setAutocompleteValue] = useState(''); const [results, setResults] = useState([]); const dropdownRef = useRef(null); - useDropdown(dropdownRef, open, setOpen); - const [focused, setFocused] = useState(false); + useDropdown(dropdownRef, open, setOpen, 'autocomplete'); const autocompleteId = id && id !== '' ? id : uuidv4(); @@ -194,15 +193,12 @@ const MdAutocomplete = React.forwardRef( { - return setFocused(false); - }} aria-expanded={open} aria-controls={`md-autocomplete_dropdown_${autocompleteId}`} id={autocompleteId} aria-describedby={ariaDescribedBy} className={inputClassNames} - value={focused || open ? autocompleteValue : displayValue} + value={open ? autocompleteValue : displayValue} tabIndex={0} onKeyDown={e => { if (e.key === 'Enter') { @@ -221,7 +217,6 @@ const MdAutocomplete = React.forwardRef( } }} onFocus={() => { - setFocused(true); !disabled && setOpen(true); }} type="text" diff --git a/packages/react/src/formElements/MdMultiAutocomplete.tsx b/packages/react/src/formElements/MdMultiAutocomplete.tsx index 653664f3..2b86f6f9 100644 --- a/packages/react/src/formElements/MdMultiAutocomplete.tsx +++ b/packages/react/src/formElements/MdMultiAutocomplete.tsx @@ -67,8 +67,7 @@ const MdMultiAutocomplete = React.forwardRef([]); const dropdownRef = useRef(null); - useDropdown(dropdownRef, open, setOpen); - const [focused, setFocused] = useState(false); + useDropdown(dropdownRef, open, setOpen, 'autocomplete'); const multiAutocompleteId = id && id !== '' ? id : uuidv4(); @@ -222,10 +221,7 @@ const MdMultiAutocomplete = React.forwardRef { - return setFocused(false); - }} - value={focused || open ? autocompleteValue : displayValue} + value={open ? autocompleteValue : displayValue} tabIndex={0} onKeyDown={e => { if (e.key === 'Enter') { @@ -244,7 +240,6 @@ const MdMultiAutocomplete = React.forwardRef { - setFocused(true); !disabled && setOpen(true); }} type="text" @@ -282,11 +277,6 @@ const MdMultiAutocomplete = React.forwardRef { - if (e.key === 'Enter') { - return handleOptionClick(option); - } - }} onChange={() => { handleOptionClick(option); }} diff --git a/packages/react/src/formElements/MdMultiSelect.tsx b/packages/react/src/formElements/MdMultiSelect.tsx index 09540794..50354eab 100644 --- a/packages/react/src/formElements/MdMultiSelect.tsx +++ b/packages/react/src/formElements/MdMultiSelect.tsx @@ -228,11 +228,6 @@ const MdMultiSelect = React.forwardRef( disabled={!!disabled} data-value={option.value} data-text={option.text} - onKeyDown={(e: React.KeyboardEvent) => { - if (e.key === 'Enter') { - return handleOptionClick(option); - } - }} onChange={() => { return handleOptionClick(option); }} diff --git a/packages/react/src/hooks/useDropdown.ts b/packages/react/src/hooks/useDropdown.ts index 09c607fd..ce8f73c0 100644 --- a/packages/react/src/hooks/useDropdown.ts +++ b/packages/react/src/hooks/useDropdown.ts @@ -6,6 +6,7 @@ export default function useDropdown( ref: React.RefObject, open: boolean, setOpen: (_open: boolean) => void, + elementType?: 'autocomplete' | 'select', ) { const onKeyDown = useCallback((e: KeyboardEvent) => { const focusableElements = ref.current?.querySelectorAll(focusableHtmlElements); @@ -13,6 +14,9 @@ export default function useDropdown( if (e.key === 'Escape') { const element = focusableElements?.[0]; element?.focus(); + if (elementType === 'autocomplete') { + element?.blur(); + } document.removeEventListener('keydown', onKeyDown, false); setOpen(false); } From 86c285d952cc05ea6cd76462463344f30b7393c3 Mon Sep 17 00:00:00 2001 From: Aurora Scharff Date: Thu, 3 Oct 2024 14:43:13 +0200 Subject: [PATCH 3/5] Update package.json --- packages/react/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/package.json b/packages/react/package.json index f91778f0..902e2c62 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@miljodirektoratet/md-react", - "version": "3.7.0", + "version": "3.1.0", "description": "React-komponenter for Miljødirektoratet", "author": "Miljødirektoratet", "main": "./dist/index.js", From 007c2c9fbea299ef0aaab736be0ef8746f6832ae Mon Sep 17 00:00:00 2001 From: Aurora Scharff Date: Thu, 3 Oct 2024 14:54:56 +0200 Subject: [PATCH 4/5] Remove handler for opening/closing the autocompletes --- packages/react/src/formElements/MdAutocomplete.tsx | 5 ----- packages/react/src/formElements/MdMultiAutocomplete.tsx | 5 ----- 2 files changed, 10 deletions(-) diff --git a/packages/react/src/formElements/MdAutocomplete.tsx b/packages/react/src/formElements/MdAutocomplete.tsx index 31bcd779..0c43a62b 100644 --- a/packages/react/src/formElements/MdAutocomplete.tsx +++ b/packages/react/src/formElements/MdAutocomplete.tsx @@ -200,11 +200,6 @@ const MdAutocomplete = React.forwardRef( className={inputClassNames} value={open ? autocompleteValue : displayValue} tabIndex={0} - onKeyDown={e => { - if (e.key === 'Enter') { - setOpen(!open); - } - }} onChange={e => { setAutocompleteValue(e.target.value); if (e.target.value && e.target.value !== '') { diff --git a/packages/react/src/formElements/MdMultiAutocomplete.tsx b/packages/react/src/formElements/MdMultiAutocomplete.tsx index 2b86f6f9..1835ab69 100644 --- a/packages/react/src/formElements/MdMultiAutocomplete.tsx +++ b/packages/react/src/formElements/MdMultiAutocomplete.tsx @@ -223,11 +223,6 @@ const MdMultiAutocomplete = React.forwardRef { - if (e.key === 'Enter') { - setOpen(!open); - } - }} onChange={e => { setAutocompleteValue(e.target.value); if (e.target.value && e.target.value !== '') { From cb1d5bb2983a5175ec90e77203b5677aa1663a6f Mon Sep 17 00:00:00 2001 From: Aurora Scharff Date: Fri, 4 Oct 2024 08:48:22 +0200 Subject: [PATCH 5/5] Update --- packages/react/src/formElements/MdMultiAutocomplete.tsx | 5 +++++ packages/react/src/formElements/MdMultiSelect.tsx | 5 +++++ 2 files changed, 10 insertions(+) diff --git a/packages/react/src/formElements/MdMultiAutocomplete.tsx b/packages/react/src/formElements/MdMultiAutocomplete.tsx index 1835ab69..48b170ea 100644 --- a/packages/react/src/formElements/MdMultiAutocomplete.tsx +++ b/packages/react/src/formElements/MdMultiAutocomplete.tsx @@ -272,6 +272,11 @@ const MdMultiAutocomplete = React.forwardRef { + if (e.key === 'Enter') { + return handleOptionClick(option); + } + }} onChange={() => { handleOptionClick(option); }} diff --git a/packages/react/src/formElements/MdMultiSelect.tsx b/packages/react/src/formElements/MdMultiSelect.tsx index 50354eab..09540794 100644 --- a/packages/react/src/formElements/MdMultiSelect.tsx +++ b/packages/react/src/formElements/MdMultiSelect.tsx @@ -228,6 +228,11 @@ const MdMultiSelect = React.forwardRef( disabled={!!disabled} data-value={option.value} data-text={option.text} + onKeyDown={(e: React.KeyboardEvent) => { + if (e.key === 'Enter') { + return handleOptionClick(option); + } + }} onChange={() => { return handleOptionClick(option); }}