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

Unable to select the values from the dropdown menu on the "Products > Add New > Product Catalog" page (#41093) 

* Fix unable to select the values from the select tree control

* Add changelog file
This commit is contained in:
Maikel David Pérez Gómez 2023-10-30 13:06:59 -03:00 committed by GitHub
parent 6ecf096d1c
commit 65408410fb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 24 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/js/components/changelog/fix-41049 Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: fix
Fix unable to select the values from the select tree control

1
packages/js/components/src/experimental-select-tree-control/select-tree-menu.tsx
View File

@ -126,7 +126,6 @@ export const SelectTreeMenu = ( {
) : ( ) : (
<Tree <Tree
{ ...props } { ...props }
id={ `${ props.id }-menu` }
ref={ ref } ref={ ref }
items={ items } items={ items }
onTreeBlur={ onClose } onTreeBlur={ onClose }

31
packages/js/components/src/experimental-select-tree-control/select-tree.tsx
View File

@ -45,16 +45,25 @@ export const SelectTree = function SelectTree( {
const selectTreeInstanceId = useInstanceId( const selectTreeInstanceId = useInstanceId(
SelectTree, SelectTree,
'woocommerce-experimental-select-tree-control__dropdown' 'woocommerce-experimental-select-tree-control__dropdown'
); ) as string;
const menuInstanceId = useInstanceId( const menuInstanceId = useInstanceId(
SelectTree, SelectTree,
'woocommerce-select-tree-control__menu' 'woocommerce-select-tree-control__menu'
); ) as string;
const isEventOutside = ( event: React.FocusEvent ) => {
return ! document function isEventOutside( event: React.FocusEvent ) {
.querySelector( '.' + selectTreeInstanceId ) const isInsideSelect = document
.getElementById( selectTreeInstanceId )
?.contains( event.relatedTarget ); ?.contains( event.relatedTarget );
};
const isInsidePopover = document
.getElementById( menuInstanceId )
?.closest(
'.woocommerce-experimental-select-tree-control__popover-menu'
)
?.contains( event.relatedTarget );
return ! ( isInsideSelect || isInsidePopover );
}
const recalculateInputValue = () => { const recalculateInputValue = () => {
if ( onInputChange ) { if ( onInputChange ) {
@ -117,11 +126,11 @@ export const SelectTree = function SelectTree( {
// focus on the first element from the Popover // focus on the first element from the Popover
( (
document.querySelector( document.querySelector(
`.${ menuInstanceId } input, .${ menuInstanceId } button` `#${ menuInstanceId } input, #${ menuInstanceId } button`
) as HTMLInputElement | HTMLButtonElement ) as HTMLInputElement | HTMLButtonElement
)?.focus(); )?.focus();
} }
if ( event.key === 'Tab' ) { if ( event.key === 'Tab' || event.key === 'Escape' ) {
setIsOpen( false ); setIsOpen( false );
recalculateInputValue(); recalculateInputValue();
} }
@ -138,7 +147,8 @@ export const SelectTree = function SelectTree( {
return ( return (
<div <div
className={ `woocommerce-experimental-select-tree-control__dropdown ${ selectTreeInstanceId }` } id={ selectTreeInstanceId }
className={ `woocommerce-experimental-select-tree-control__dropdown` }
tabIndex={ -1 } tabIndex={ -1 }
> >
<div <div
@ -217,8 +227,7 @@ export const SelectTree = function SelectTree( {
props.onSelect( item ); props.onSelect( item );
} }
} } } }
id={ `${ props.id }-menu` } id={ menuInstanceId }
className={ menuInstanceId.toString() }
ref={ ref } ref={ ref }
isEventOutside={ isEventOutside } isEventOutside={ isEventOutside }
isLoading={ isLoading } isLoading={ isLoading }