Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(ui5-select): rework value handling #10904

Open
wants to merge 15 commits into
base: main
Choose a base branch
from

Conversation

ilhan007
Copy link
Member

@ilhan007 ilhan007 commented Feb 19, 2025

Make "value" fully functional property/attribute and even with higher priority over the selected state of the options.

The Select now will have 2 (competing) APIs for selection, however users will be encouraged to use:

  • (1) Either use only the Select's value to determine the selected option
  • (2) Оr as prior to this change - using the Options selected state for that.

Enhancements:

  • value works both as property and attribute (previously via property only). This is especially a great improvement when binding to the value in React 18 (in React 19 the property setter is used and works even without this change)
  • when value is used to select an option, the option wasn't properly selected if it's added with a slight delay caused by app specifics (options are arriving late) or framework specifics (the options aren't slotted/defined when calling the Select's value)

Fixes: #10537 #8174

Example of the improved usage in React

const [selectedValue, setSelectedValue] = useState("banana");

 useEffect(() => {
    setTimeout(() => {
      console.log("Adding options dynamically after delay");
      setOptions(["apple", "banana", "orange", "kiwi"]); // Adding options dynamically after delay
    }, 2000);
  }, []);
  
 <ui5-select ref={selectRef} value={selectedValue}>
        {options.length > 0 ? (
          options.map((opt) => (
            <ui5-option key={opt}>{opt}</ui5-option>
          ))
        ) : (
          <ui5-option>apple</ui5-option>
        )}
</ui5-select>

React18 and React19 - pending selection

  • Prior to the change, although the value points to the second option, the first option is selected
    as the options are slotted with delay.
Screenshot 2025-02-24 at 21 56 23
  • After the change, the second option is properly selected, pending selections are applied:
Screenshot 2025-02-24 at 21 57 06

React18 - model changes
setSelectedValue("orange");

  • Prior to this change, updating the model (bound to value) does not update the Select's selection
  • With the change, updating the model (bound to value) changes the Select's selection

@ilhan007 ilhan007 changed the title draft(ui5-select): rework value handling refactor(ui5-select): rework value handling Feb 24, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Select]: Set default value no work
1 participant