[Bug] - Incorrect error emitted by fw-list-options

[ndp]

Component
fw-list-options

Describe the bug
I see a console.error that I can't figure out how to eliminate.

To Reproduce
Steps to reproduce the current behavior:

1. Create a fw-list-options component with multiple set. Mine looks like:

<fw-popover same-width="false">
        <fw-button slot="popover-trigger">Books</fw-button>
        <fw-list-options
                multiple="true"
                id="books-filter"
                slot="popover-content"
                option-label-path="name"
                option-value-path="id"
        ></fw-list-options>
    </fw-popover>

2. Look at it in the browser and looks at debug console.
3. Observe an error: Error: Value must be a array for multi-select

I can't figure out any way to eliminate this error. I can set the value property, but I can't figure out how I'd make in an array in HTML (it's not possible!).

Expected behavior
No error message. I'm not sure what this error is preventing, but it doesn't seem relevant in the multiselect case.

Additional context
I'm not sure if this is an active project. I'm trying it out and curious about it's support. If you want me to fix it, I can-- let me know.

[srivalli-sivaramasankaran]

@ndp

The value property will be used to display the default selection in the list. It expects an array of values.

Please refer the example code below. Pass the 'id' of the data items that needs to be displayed as the default selection. If no default selection is required, pass an empty array to the value property. i.e: list.value = [];

<fw-popover same-width="false">
        <fw-button slot="popover-trigger">Books</fw-button>
        <fw-list-options
                multiple="true"
                id="books-filter"
                slot="popover-content"
                option-label-path="name"
                option-value-path="id"
        ></fw-list-options>
 </fw-popover>
    
<script type="application/javascript">
  var dataSource = [
    { id: '1', name: 'Pride and Prejudice' },
    { id: '2', name: 'The Immortals of Meluha' },
    { id: '3', name: 'War and Peace' },
  ];
  var list = document.getElementById('books-filter');
  list.options = dataSource;
  list.value = ['2'];
</script>

[ndp]

@srivalli-sivaramasankaran

Hmm. I'm doing that, but it seems like the log error is happening before the JS code runs. It's receiving an parameter of an empty string, as it is "loading". (Chrome latest/Windows) The stack looks like:

validateValue (p-9671b6e8.entry.js:1)
componentWillLoad (p-9671b6e8.entry.js:1)
at (p-d6a83339.js:1)
lt (p-d6a83339.js:1)
(anonymous) (p-d6a83339.js:1)
Ft (p-d6a83339.js:2)
Ut (p-d6a83339.js:2)
requestAnimationFrame (async)
raf (p-d6a83339.js:1)
(anonymous) (p-d6a83339.js:2)
nt (p-d6a83339.js:1)
i (p-d6a83339.js:1)
(anonymous) (p-d6a83339.js:1)
await in (anonymous) (async)
(anonymous) (p-d6a83339.js:1)
Promise.then (async)
Dt (p-d6a83339.js:2)
mt (p-d6a83339.js:1)
(anonymous) (p-d6a83339.js:1)
jmp (p-d6a83339.js:1)
connectedCallback (p-d6a83339.js:1)
(anonymous) (p-d6a83339.js:1)
St (p-d6a83339.js:1)
(anonymous) (crayons.esm.js:1)
Promise.then (async)
(anonymous) (crayons.esm.js:1)

I don't know that I can get my initialization code to run any earlier, as the page is pretty simple. I've tried loading my initialization code both before and after the component is included, but I get the same result.

Is see the same error on the documentation page: [https://crayons.freshworks.com/components/core/options-list/]

Related, I am also running into a race condition. When I serve my code in the browser, it works fine, but when served out of a cache (as a PWA), the list options get reset to an empty list. I haven't tracked that one down yet. Perhaps these are all wound up together as in the initialization order.