Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Combobox patch to prevent the suggestion list being left open after browser autocomplete (https://github.com/woocommerce/woocommerce-blocks/pull/4590) 

* Combobox patch

* Update a package to invalidate CI cache

* Update cache handling

* revert eslint package change
This commit is contained in:
Mike Jolley 2021-08-17 13:25:11 +01:00 committed by GitHub
parent 71851f25a5
commit 717465ed99
5 changed files with 359 additions and 356 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
plugins/woocommerce-blocks/.github/workflows/js-css-linting.yml vendored
View File

@ -16,11 +16,10 @@ jobs:
uses: actions/cache@v2 uses: actions/cache@v2
with: with:
path: node_modules path: node_modules
key: ${{ runner.OS }}-build-${{ hashFiles('**/package-lock.json') }} key: ${{ runner.OS }}-build-${{ secrets.CACHE_VERSION }}-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
restore-keys: | restore-keys: |
${{ runner.OS }}-build-${{ env.cache-name }}- ${{ runner.OS }}-build-${{ secrets.CACHE_VERSION }}-${{ env.cache-name }}-
${{ runner.OS }}-build- ${{ runner.OS }}-build-${{ secrets.CACHE_VERSION }}-
${{ runner.OS }}-
- name: Install Node Dependencies - name: Install Node Dependencies
run: npm install run: npm install
@ -35,11 +34,10 @@ jobs:
uses: actions/cache@v2 uses: actions/cache@v2
with: with:
path: node_modules path: node_modules
key: ${{ runner.OS }}-build-${{ hashFiles('**/package-lock.json') }} key: ${{ runner.OS }}-build-${{ secrets.CACHE_VERSION }}-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
restore-keys: | restore-keys: |
${{ runner.OS }}-build-${{ env.cache-name }}- ${{ runner.OS }}-build-${{ secrets.CACHE_VERSION }}-${{ env.cache-name }}-
${{ runner.OS }}-build- ${{ runner.OS }}-build-${{ secrets.CACHE_VERSION }}-
${{ runner.OS }}-
- name: Install Node Dependencies - name: Install Node Dependencies
run: npm install run: npm install
- name: Save Code Linting Report JSON - name: Save Code Linting Report JSON
@ -54,8 +52,8 @@ jobs:
- name: Annotate Code Linting Results - name: Annotate Code Linting Results
uses: ataylorme/eslint-annotate-action@1.2.0 uses: ataylorme/eslint-annotate-action@1.2.0
with: with:
repo-token: "${{ secrets.GITHUB_TOKEN }}" repo-token: '${{ secrets.GITHUB_TOKEN }}'
report-json: "eslint_report.json" report-json: 'eslint_report.json'
CSSLintingCheck: CSSLintingCheck:
name: Lint CSS name: Lint CSS
@ -68,11 +66,10 @@ jobs:
uses: actions/cache@v2 uses: actions/cache@v2
with: with:
path: node_modules path: node_modules
key: ${{ runner.OS }}-build-${{ hashFiles('**/package-lock.json') }} key: ${{ runner.OS }}-build-${{ secrets.CACHE_VERSION }}-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
restore-keys: | restore-keys: |
${{ runner.OS }}-build-${{ env.cache-name }}- ${{ runner.OS }}-build-${{ secrets.CACHE_VERSION }}-${{ env.cache-name }}-
${{ runner.OS }}-build- ${{ runner.OS }}-build-${{ secrets.CACHE_VERSION }}-
${{ runner.OS }}-
- name: Install Node Dependencies - name: Install Node Dependencies
run: npm install run: npm install
- name: Lint CSS - name: Lint CSS

22
plugins/woocommerce-blocks/.github/workflows/php-js-e2e-tests.yml vendored
View File

@ -6,7 +6,6 @@ on:
pull_request: pull_request:
jobs: jobs:
Setup: Setup:
runs-on: ubuntu-latest runs-on: ubuntu-latest
name: Setup name: Setup
@ -20,11 +19,10 @@ jobs:
with: with:
# npm cache files are stored in `~/.npm` on Linux/macOS # npm cache files are stored in `~/.npm` on Linux/macOS
path: ~/.npm path: ~/.npm
key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }} key: ${{ runner.OS }}-build-${{ secrets.CACHE_VERSION }}-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
restore-keys: | restore-keys: |
${{ runner.os }}-build-${{ env.cache-name }}- ${{ runner.OS }}-build-${{ secrets.CACHE_VERSION }}-${{ env.cache-name }}-
${{ runner.os }}-build- ${{ runner.OS }}-build-${{ secrets.CACHE_VERSION }}-
${{ runner.os }}-
- name: Use Node.js 14.x - name: Use Node.js 14.x
uses: actions/setup-node@v1 uses: actions/setup-node@v1
@ -72,11 +70,10 @@ jobs:
with: with:
# npm cache files are stored in `~/.npm` on Linux/macOS # npm cache files are stored in `~/.npm` on Linux/macOS
path: ~/.npm path: ~/.npm
key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }} key: ${{ runner.OS }}-build-${{ secrets.CACHE_VERSION }}-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
restore-keys: | restore-keys: |
${{ runner.os }}-build-${{ env.cache-name }}- ${{ runner.OS }}-build-${{ secrets.CACHE_VERSION }}-${{ env.cache-name }}-
${{ runner.os }}-build- ${{ runner.OS }}-build-${{ secrets.CACHE_VERSION }}-
${{ runner.os }}-
- name: Use Node.js 14.x - name: Use Node.js 14.x
uses: actions/setup-node@v1 uses: actions/setup-node@v1
@ -138,11 +135,10 @@ jobs:
with: with:
# npm cache files are stored in `~/.npm` on Linux/macOS # npm cache files are stored in `~/.npm` on Linux/macOS
path: ~/.npm path: ~/.npm
key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }} key: ${{ runner.OS }}-build-${{ secrets.CACHE_VERSION }}-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
restore-keys: | restore-keys: |
${{ runner.os }}-build-${{ env.cache-name }}- ${{ runner.OS }}-build-${{ secrets.CACHE_VERSION }}-${{ env.cache-name }}-
${{ runner.os }}-build- ${{ runner.OS }}-build-${{ secrets.CACHE_VERSION }}-
${{ runner.os }}-
- name: Use Node.js 14.x - name: Use Node.js 14.x
uses: actions/setup-node@v1 uses: actions/setup-node@v1

15
plugins/woocommerce-blocks/.github/workflows/unit-tests.yml vendored
View File

@ -6,7 +6,6 @@ on:
pull_request: pull_request:
jobs: jobs:
Setup: Setup:
runs-on: ubuntu-latest runs-on: ubuntu-latest
name: Setup name: Setup
@ -20,11 +19,10 @@ jobs:
with: with:
# npm cache files are stored in `~/.npm` on Linux/macOS # npm cache files are stored in `~/.npm` on Linux/macOS
path: ~/.npm path: ~/.npm
key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }} key: ${{ runner.OS }}-build-${{ secrets.CACHE_VERSION }}-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
restore-keys: | restore-keys: |
${{ runner.os }}-build-${{ env.cache-name }}- ${{ runner.OS }}-build-${{ secrets.CACHE_VERSION }}-${{ env.cache-name }}-
${{ runner.os }}-build- ${{ runner.OS }}-build-${{ secrets.CACHE_VERSION }}-
${{ runner.os }}-
- name: Use Node.js 14.x - name: Use Node.js 14.x
uses: actions/setup-node@v1 uses: actions/setup-node@v1
@ -113,11 +111,10 @@ jobs:
with: with:
# npm cache files are stored in `~/.npm` on Linux/macOS # npm cache files are stored in `~/.npm` on Linux/macOS
path: ~/.npm path: ~/.npm
key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }} key: ${{ runner.OS }}-build-${{ secrets.CACHE_VERSION }}-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
restore-keys: | restore-keys: |
${{ runner.os }}-build-${{ env.cache-name }}- ${{ runner.OS }}-build-${{ secrets.CACHE_VERSION }}-${{ env.cache-name }}-
${{ runner.os }}-build- ${{ runner.OS }}-build-${{ secrets.CACHE_VERSION }}-
${{ runner.os }}-
- name: Use Node.js 14.x - name: Use Node.js 14.x
uses: actions/setup-node@v1 uses: actions/setup-node@v1

1
plugins/woocommerce-blocks/assets/js/base/components/combobox/index.tsx
View File

@ -94,6 +94,7 @@ const Combobox = ( {
] ); ] );
// @todo Remove patch for ComboboxControl once https://github.com/WordPress/gutenberg/pull/33928 is released // @todo Remove patch for ComboboxControl once https://github.com/WordPress/gutenberg/pull/33928 is released
// Also see https://github.com/WordPress/gutenberg/pull/34090
return ( return (
<div <div
id={ controlId } id={ controlId }

42
plugins/woocommerce-blocks/patches/wordpress-components+11.1.5.patch
View File

@ -1,5 +1,5 @@
diff --git a/node_modules/wordpress-components/build-module/combobox-control/index.js b/node_modules/wordpress-components/build-module/combobox-control/index.js diff --git a/node_modules/wordpress-components/build-module/combobox-control/index.js b/node_modules/wordpress-components/build-module/combobox-control/index.js
index 51c59c1..61bda14 100644 index 51c59c1..a4b58ab 100644
--- a/node_modules/wordpress-components/build-module/combobox-control/index.js --- a/node_modules/wordpress-components/build-module/combobox-control/index.js
+++ b/node_modules/wordpress-components/build-module/combobox-control/index.js +++ b/node_modules/wordpress-components/build-module/combobox-control/index.js
@@ -1,19 +1,10 @@ @@ -1,19 +1,10 @@
@ -23,7 +23,7 @@ index 51c59c1..61bda14 100644
/** /**
* WordPress dependencies * WordPress dependencies
*/ */
@@ -34,77 +25,46 @@ import BaseControl from '../base-control'; @@ -34,77 +25,47 @@ import BaseControl from '../base-control';
import Button from '../button'; import Button from '../button';
import { Flex, FlexBlock, FlexItem } from '../flex'; import { Flex, FlexBlock, FlexItem } from '../flex';
import withFocusOutside from '../higher-order/with-focus-outside'; import withFocusOutside from '../higher-order/with-focus-outside';
@ -125,6 +125,7 @@ index 51c59c1..61bda14 100644
+ const instanceId = useInstanceId(ComboboxControl); + const instanceId = useInstanceId(ComboboxControl);
+ const [selectedSuggestion, setSelectedSuggestion] = useState(currentOption || null); + const [selectedSuggestion, setSelectedSuggestion] = useState(currentOption || null);
+ const [isExpanded, setIsExpanded] = useState(false); + const [isExpanded, setIsExpanded] = useState(false);
+ const [inputHasFocus, setInputHasFocus] = useState(false);
+ const [inputValue, setInputValue] = useState(''); + const [inputValue, setInputValue] = useState('');
+ const inputContainer = useRef(); + const inputContainer = useRef();
+ const matchingSuggestions = useMemo(() => { + const matchingSuggestions = useMemo(() => {
@ -136,7 +137,7 @@ index 51c59c1..61bda14 100644
if (index === 0) { if (index === 0) {
startsWithMatch.push(option); startsWithMatch.push(option);
@@ -115,7 +75,7 @@ function ComboboxControl(_ref) { @@ -115,7 +76,7 @@ function ComboboxControl(_ref) {
return startsWithMatch.concat(containsMatch); return startsWithMatch.concat(containsMatch);
}, [inputValue, options, value]); }, [inputValue, options, value]);
@ -145,7 +146,7 @@ index 51c59c1..61bda14 100644
onChange(newSelectedSuggestion.value); onChange(newSelectedSuggestion.value);
speak(messages.selected, 'assertive'); speak(messages.selected, 'assertive');
setSelectedSuggestion(newSelectedSuggestion); setSelectedSuggestion(newSelectedSuggestion);
@@ -123,10 +83,9 @@ function ComboboxControl(_ref) { @@ -123,10 +84,9 @@ function ComboboxControl(_ref) {
setIsExpanded(false); setIsExpanded(false);
}; };
@ -159,7 +160,7 @@ index 51c59c1..61bda14 100644
if (nextIndex < 0) { if (nextIndex < 0) {
nextIndex = matchingSuggestions.length - 1; nextIndex = matchingSuggestions.length - 1;
@@ -138,8 +97,12 @@ function ComboboxControl(_ref) { @@ -138,8 +98,12 @@ function ComboboxControl(_ref) {
setIsExpanded(true); setIsExpanded(true);
}; };
@ -174,7 +175,7 @@ index 51c59c1..61bda14 100644
switch (event.keyCode) { switch (event.keyCode) {
case ENTER: case ENTER:
@@ -164,7 +127,6 @@ function ComboboxControl(_ref) { @@ -164,7 +128,6 @@ function ComboboxControl(_ref) {
setIsExpanded(false); setIsExpanded(false);
setSelectedSuggestion(null); setSelectedSuggestion(null);
preventDefault = true; preventDefault = true;
@ -182,12 +183,17 @@ index 51c59c1..61bda14 100644
break; break;
default: default:
@@ -176,34 +138,44 @@ function ComboboxControl(_ref) { @@ -176,34 +139,52 @@ function ComboboxControl(_ref) {
} }
}; };
- var onFocus = function onFocus() { - var onFocus = function onFocus() {
+ const onBlur = () => {
+ setInputHasFocus(false);
+ };
+
+ const onFocus = () => { + const onFocus = () => {
+ setInputHasFocus(true);
setIsExpanded(true); setIsExpanded(true);
onFilterValueChange(''); onFilterValueChange('');
setInputValue(''); setInputValue('');
@ -204,7 +210,11 @@ index 51c59c1..61bda14 100644
+ const text = event.value; + const text = event.value;
setInputValue(text); setInputValue(text);
onFilterValueChange(text); onFilterValueChange(text);
setIsExpanded(true); - setIsExpanded(true);
+
+ if (inputHasFocus) {
+ setIsExpanded(true);
+ }
}; };
- var handleOnReset = function handleOnReset() { - var handleOnReset = function handleOnReset() {
@ -213,14 +223,14 @@ index 51c59c1..61bda14 100644
inputContainer.current.input.focus(); inputContainer.current.input.focus();
- }; // Announcements - }; // Announcements
+ }; // Update current selections when the filter input changes. + }; // Update current selections when the filter input changes.
+
- useEffect(function () {
- var hasMatchingSuggestions = matchingSuggestions.length > 0;
+ useEffect(() => { + useEffect(() => {
+ const hasMatchingSuggestions = matchingSuggestions.length > 0; + const hasMatchingSuggestions = matchingSuggestions.length > 0;
+ const hasSelectedMatchingSuggestions = matchingSuggestions.indexOf(selectedSuggestion) > 0; + const hasSelectedMatchingSuggestions = matchingSuggestions.indexOf(selectedSuggestion) > 0;
+
- useEffect(function () {
- var hasMatchingSuggestions = matchingSuggestions.length > 0;
+ if (hasMatchingSuggestions && !hasSelectedMatchingSuggestions) { + if (hasMatchingSuggestions && !hasSelectedMatchingSuggestions) {
+ // If the current selection isn't present in the list of suggestions, then automatically select the first item from the list of suggestions. + // If the current selection isn't present in the list of suggestions, then automatically select the first item from the list of suggestions.
+ setSelectedSuggestion(matchingSuggestions[0]); + setSelectedSuggestion(matchingSuggestions[0]);
@ -236,7 +246,7 @@ index 51c59c1..61bda14 100644
/* translators: %d: number of results. */ /* translators: %d: number of results. */
_n('%d result found, use up and down arrow keys to navigate.', '%d results found, use up and down arrow keys to navigate.', matchingSuggestions.length), matchingSuggestions.length) : __('No results.'); _n('%d result found, use up and down arrow keys to navigate.', '%d results found, use up and down arrow keys to navigate.', matchingSuggestions.length), matchingSuggestions.length) : __('No results.');
speak(message, 'polite'); speak(message, 'polite');
@@ -220,7 +192,7 @@ function ComboboxControl(_ref) { @@ -220,7 +201,7 @@ function ComboboxControl(_ref) {
className: classnames(className, 'components-combobox-control'), className: classnames(className, 'components-combobox-control'),
tabIndex: "-1", tabIndex: "-1",
label: label, label: label,
@ -245,16 +255,18 @@ index 51c59c1..61bda14 100644
hideLabelFromVision: hideLabelFromVision, hideLabelFromVision: hideLabelFromVision,
help: help help: help
}, createElement("div", { }, createElement("div", {
@@ -232,7 +204,7 @@ function ComboboxControl(_ref) { @@ -232,8 +213,9 @@ function ComboboxControl(_ref) {
instanceId: instanceId, instanceId: instanceId,
ref: inputContainer, ref: inputContainer,
value: isExpanded ? inputValue : currentLabel, value: isExpanded ? inputValue : currentLabel,
- "aria-label": currentLabel ? "".concat(currentLabel, ", ").concat(label) : null, - "aria-label": currentLabel ? "".concat(currentLabel, ", ").concat(label) : null,
+ "aria-label": currentLabel ? `${currentLabel}, ${label}` : null, + "aria-label": currentLabel ? `${currentLabel}, ${label}` : null,
onFocus: onFocus, onFocus: onFocus,
+ onBlur: onBlur,
isExpanded: isExpanded, isExpanded: isExpanded,
selectedSuggestionIndex: matchingSuggestions.indexOf(selectedSuggestion), selectedSuggestionIndex: matchingSuggestions.indexOf(selectedSuggestion),
@@ -248,9 +220,7 @@ function ComboboxControl(_ref) { onChange: onInputChange
@@ -248,9 +230,7 @@ function ComboboxControl(_ref) {
match: { match: {
label: inputValue label: inputValue
}, },