fix: Pass value to visual input in select

[mannycarrera4]

Summary

value was not passed to the underlying select input. Consumers would pass value but it wasn't working. This change passes the value to the input so consumers can control it and the visual input would reflect it..

Release Category

Components

---

Checklist

• MDX documentation adheres to Canvas Kit's Documentation Guidelines
• Label ready for review has been added to PR

For the Reviewer

• PR title is short and descriptive
• PR summary describes the change (Fixes/Resolves linked correctly)
• PR Release Notes describes additional information useful to call out in a release message or removed if not applicable
• Breaking Changes provides useful information to upgrade to this code or removed if not applicable

Where Should the Reviewer Start?

Areas for Feedback? (optional)

• Code
• Testing

Testing Manually

Screenshots or GIFs (if applicable)

Thank You Gif (optional)

[cypress]

Passing run #7141 ↗︎

0

970

3

0

0

Details:

Merge 171a0b3 into ce4adec...
Project: canvas-kit	Commit: 8b39bcc197 ℹ️
Status: Passed	Duration: 05:04 💡
Started: Apr 9, 2024 9:08 PM	Ended: Apr 9, 2024 9:13 PM

Review all test suite changes for PR #2676 ↗︎

failing

[mannycarrera4]

I need someone to verify this logic. When Nicholas worked on this in this sandbox it worked. However, it broke the dynamic items story because it wasn't setting the value of the visual input.

[mannycarrera4]

Also this change now throws the following error because we're updating the value ourselves:

Warning: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.

[NicholasBoll]

The comment splitting the code gave me trouble trying to understand the logic in its entirety:

          value: elemProps.value
            ? model.navigation.getItem(model.state.selectedIds[0], model).textValue
            : model.state.selectedIds.length > 0 && model.state.items.length > 0
            ? model.navigation.getItem(model.state.selectedIds[0], model).textValue
            : undefined,

It looks like this code says the following: "if the developer passed a value, look up the text value of the id. If not, see if there is selected ids and items, if yes, look up the text value, otherwise send undefined".

This doesn't make sense. Are you meaning it to always be a "controlled" input to React? It seems like the following would work better:

          model.state.selectedIds.length > 0 && model.state.items.length > 0
            ? model.navigation.getItem(model.state.selectedIds[0], model).textValue
            : undefined,

This logic says if there's a selected id and items, the value of the visual input should be the text value of the server value. The test for model.state.items is to make sure the getItem call doesn't fail on an error.

[RayRedGoose]

Suggested change

	: model.state.selectedIds.length > 0 && model.state.items.length > 0
	: model.state.selectedIds.length && model.state.items.length

[NicholasBoll]

What is the failure of the ternary supposed to do? The first part says "if the developer passes a value, do a text lookup of that value". The original sandbox had the failure case return undefined, meaning "if the developer didn't pass a value, don't treat this like a controllable input". But the model.state.selectedIds.length > 0 && model.state.items.length > 0 will return true or false if a value is not provided. What does this do? It doesn't match the original intent, but what is the side effect?