scania-digital-design-system/sdds

[Bug report]: Dropdown using default-option selects the wrong option.

Closed this issue · 2 comments

thezic commented

Requirements before reporting

  • No duplicated issue reported.
  • I have read the contribution guidelines.
  • I have checked the lastest version if the bug exist there. See all avaliable packages at npmJS.com
  • I have made sure that the issue comes from SDDS packages by removing SDDS from my project as a test.
  • I have followed the installation guide.

Package

@scania/components

Package versions

@scania/components 4.9.3

Browser

Edge (Chromium)

Framework

React

Version

React 18

Reproduction steps

Set default-option on the dropdown

See codebox for example:
https://codesandbox.io/s/tegel-dropdown-test-wqzyqo?file=/src/App.tsx

Code example

export default function App() {
  const data = `[
    {"label": "Denmark","value":"1384"},
    {"label": "Sweden","value":"4"}]`;
  return (
    <div className="App">
      {/* 1384 is Denmark, but Sweden is selected in the dropdown*/}
      <sdds-dropdown-filter data={data} default-option="1384" />
    </div>
  );
}

Screenshots

image

Expected behaviour

The dropdown should select the correct option.

Console errors

Contact information

simon.dahlberg@cdab.eu

AB#2427

thezic commented

It is due to this line:

sdds/components/src/components/dropdown/dropdown.tsx

Line 115 in 22fc47b

if (optionValue.includes(el['value']) || el['value'] === optionValue) {

Essentially you check if the value on the option is a substring of the option we want to set. And that is true for the above example. "1384".includes("4") === true