Certain props are passed down from ControlWithError to the inner control, so this simple div wrapper is not going to be sufficient. (I notice this wasn't mentioned anywhere in the documentation, so I'll add it at #71392.)

As for the ref passing, we can now make changes to the @wordpress/components components directly (unlike when I was working on the other controls 😅), so I think it would be cleaner to enhance FormTokenField itself so it forwards a ref to the underlying input. Right now FormTokenField doesn't take a ref at all. We should also enhance it so the required prop on FormTokenFieldwould also be passed down to the underlying input. This would allow us to be less hacky in this implementation. Could you try that?

Thank you for the review!

I looked into this, and this component is somewhat more challenging than the others. Since the checks for the required field only verify the input's value (i.e., not the tokens), it would always trigger an error, even when the field contains tokens.

I made some changes to disable the default required checks, but I'm unsure if this is the best approach or if you have other suggestions I can try.

Thank you!

I see! This has happened on two other components (ToggleGroupControl and CustomSelectControl), and I worked around it by using a hidden "delegate" element. At the time I thought it was hacky, but I later discovered that at least one other library uses a similar technique for all their validated form components, so I guess it isn't that weird.

I think we could try a normal <input type="text"> delegate here, since the built-in error message for required ("Please fill out this field.") is generic enough for FormTokenField. A <select multiple> delegate would be a better match for our array data type, but the built-in error message ("Please select an item in the list.") doesn't fit cases where FormTokenField can accept new items generated by the user.

Basically you append a hidden <input value={ hasTokens ? "has value" : "" }> or something so the required check reflects the selected token state. Does that make sense?

Gotcha! Thank you 🙏 I pushed changes in b6c9b91, let me know how that looks

I noticed some Sass variable handling is wrong in the stylesheet, so I'll fix it in #71391. With that in mind though, I think we'll need some error styles for FormTokenField as well, similar to what we have for ComboboxControl.

I pushed some styles we can use in abc76d7.

I think we can revert the changes here in FormTokenField, since we're going with the delegate now. Passing down the required prop is actually problematic now, because it creates a required input that can never be filled 😄

I think only the required passing can be reverted, not the whole file. Done in ba0bd0f

I don't think the ref forwarding is strictly necessary for the functionality in this PR? It's more of an unrelated enhancement for FormTokenField at this point. No strong opinion though.

I pushed some styles we can use in abc76d7.

I don't think the ref forwarding is strictly necessary for the functionality in this PR? It's more of an unrelated enhancement for FormTokenField at this point. No strong opinion though.