add on control enum data type not support object values

[liuhann]

Describe the bug

For the enum data type, The options value object can be injected to component properties （take effect on preview） but the control panel value is 'empty', and the multi-select array of object can't be injected to preview component

To Reproduce Steps to reproduce the behavior:

Story like this:

export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    backgroundColor: { control: 'color' },
    loadingState: {
      control: {
        type: 'select',
        options: {
          'loading': {
            state: 'loading',
            // some additional data
          },
          'pending': {
            state: 'pending',
           // some additional data
          }
        },
      },
    }
  },
};

select control loadingState to loading or pending ,the select won't change.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[vkammerer]

@shilman I've encountered the bug as well and researched a bit its cause, so I'm sharing my findings here in the hope it might help you. It looks like you currently determining which option is currently selected by checking for values equality. However, while it works for primitive types, it doesn't for object and arrays:

1 === 1 // true
"foo" === "foo" // true
{a: 1} === {a: 1} // false

It looks like there may be two solutions to that problem. You could either:

• do a deep equal comparison, but the performance will take a hit.
• check for keys equality (as in, keys of the object assigned to control.options) instead of values equality.

[shilman]

Thanks for sharing @vkammerer, that's really helpful--I'll take a closer look!