Replace DropdownSelector with FormTokenField from Gutenberg

[Aljullu]

Gutenberg has a component which is very similar to our DropdownSelector:

https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/form-token-field

This issue is about trying to completely remove DropdownSelector and instead use FormTokenField from Gutenberg.

In WordPress/gutenberg#29110 some new props were added to that component so it's easier to match the behavior of the DropdownSelector.

[Aljullu]

Instead of creating a new component in Gutenberg, I'm currently taking another approach which consists on extending the FormTokenField component adding some new props. Those props will be useful to us if we ever replace our own implementation of DropdownSelector with FormTokenField. Progress can be seen in this PR: WordPress/gutenberg#29110.

[Aljullu]

Now that WordPress/gutenberg#29110 has been merged, I updated the title and description of this issue. We will no longer try to get DropdownSelector into Gutenberg but instead will try to replace the instances of DropdownSelector in our codebase with FormTokenField.

[ralucaStan]

I tried replacing the component and this is what I found while using FormTokenField :

• from a look and feel point of view we should not have any issues. We would need to decide if we want to keep the current design or use the one from FormTokenField. The differences aren't that big:

  • Current implementation:
    
  • With FormTokenField:
    

• we will have to update @wordpress/components so that we can use __experimentalExpandOnFocus and __experimentalExpandOnFocus props on the component

While trying to adapt the Filter Products by Attribute Block, I've come across some issues:

• because for FormTokenField an array with all the selected values is passed to the callback onChange we can't use the logic we have in place for this event. With the current implementation we receive just the value selected/removed and we announce it. I guess this is because we use the same change handler for the checkbox variant of the block. With FormTokenField I could not find out how to get only the value that caused the change event.

• we can only pass a string for the suggestion, so this means styling the count would not be possible

I think the replacement is possible, but we would need make some changes to the Filter Products by Attribute Block logic in order to accommodate the new component.

[github-actions]

This issue has been marked as stale because it has not seen any activity within the past 60 days. Our team uses this tool to help surface issues for review. If you are the author of the issue there's no need to comment as it will be looked at.

Internal: After 10 days with no activity this issue will be automatically be closed.

[github-actions]

This issue has been marked as stale because it has not seen any activity within the past 60 days. Our team uses this tool to help surface issues for review. If you are the author of the issue there's no need to comment as it will be looked at.

Internal: After 10 days with no activity this issue will be automatically be closed.

[github-actions]

This issue has been marked as stale because it has not seen any activity within the past 60 days. Our team uses this tool to help surface issues for review. If you are the author of the issue there's no need to comment as it will be looked at.

Internal: After 10 days with no activity this issue will be automatically be closed.

[github-actions]

This issue has been marked as stale because it has not seen any activity within the past 60 days. Our team uses this tool to help surface issues for review. If you are the author of the issue there's no need to comment as it will be looked at.

Internal: After 10 days with no activity this issue will be automatically be closed.

[ralucaStan]

The goal of this task is to have a component we could also use in other places, like the country dropdown.
We wanted to support type and search not just select

[github-actions]

This issue has been marked as stale because it has not seen any activity within the past 60 days. Our team uses this tool to help surface issues for review. If you are the author of the issue there's no need to comment as it will be looked at.

Internal: After 10 days with no activity this issue will be automatically be closed.

[github-actions]

This issue has been marked as stale because it has not seen any activity within the past 60 days. Our team uses this tool to help surface issues for review. If you are the author of the issue there's no need to comment as it will be looked at.

Internal: After 10 days with no activity this issue will be automatically be closed.

[dinhtungdu]

@Aljullu @ralucaStan I tried to migrate the DropdownSelector to FormTokenField here:

We need to load the whole style of the package (adding wp-components as the style dependency). Out of the box, the package doesn't provide individual block styles. We only use one component on the front end at the moment, so loading style for all blocks in the wordpress-components package isn't an option IMO.

from a look and feel point of view we should not have any issues. We would need to decide if we want to keep the current design or use the one from FormTokenField.

@ralucaStan How did you load the style for this component on the frontend? I'm wondering if I'm missing something.

we will have to update @wordpress/components so that we can use __experimentalExpandOnFocus and __experimentalExpandOnFocus props on the component

__experimentalExpandOnFocus and __experimentalShowHowTo are available in wordpress-components at the time of writing.

because for FormTokenField an array with all the selected values is passed to the callback onChange we can't use the logic we have in place for this event.

I made a workaround for this issue by comparing the current checked value and the current tokens:

woocommerce-blocks/assets/js/blocks/attribute-filter/block.tsx

Lines 598 to 608 in d5958b0

	onChange={ ( tokens: string[] ) => {
	const added = difference( tokens, checked );
	const removed = difference( checked, tokens );
	if ( added.length === 1 ) {
	onChange( added[ 0 ] );
	}
	if ( removed.length === 1 ) {
	onChange( removed[ 0 ] );
	}
	} }

we can only pass a string for the suggestion, so this means styling the count would not be possible

The styling is actually possible, but we will have an issue with tokens. In the image below, the token contains [object object] because the label is printed as a string at here.

Additional issues:

• <FormTokenField> causes layout shift. It doesn't use absolute position for suggestions, so it pushed below content down when expanded. It may be not a real issue, but HTML <select> and our <DropdownSelector> don't have this behavior. We can fix this by overriding the style for the suggestion.

Screen.Recording.2022-06-25.at.16.50.09.mov

(Filter button style need some updates)

Possible actions

• Create a wrapper component for FormTokenField and add style for it there.
• Open an issue on Gutenberg to discuss using individual components of @wordpress/components on the front end.
• Add and additional prop tokenDisplayTransform to <FormTokenField> to avoid printing components as string.

The first one is probably the fastest one if we still want to fix this issue in the current sprint. But I don't think we should do that because we're creating another custom component. From this point of view, it's no different from using DropdownSelector.

[ralucaStan]

@dinhtungdu happy to see you picked this up. I still have my branch where I tried this out, I started a PR without saving it for you to see what changes I did 5 months ago, hope this helps. Let me know.

Nice workaround with having the lists of added and removed options 👏