Comments (2)
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>
from crayons.
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.
from crayons.
Related Issues (20)
- [Bug] - Form - Selected date range picker value is undefined on form submit
- [Bug] - Datepicker maxDate/minDate can be updated from the month select dropdown HOT 1
- [Bug] - Unable to read form values inside component for conditional rendering HOT 1
- [Bug] - No restrictions in file uploader
- [Bug] - The value displayed in the filter component for Date with inBetween condition coming as [Object Object] HOT 2
- [Bug] - Tooltip is not displayed in right slider modal HOT 1
- [Bug] - Strange styles in the Select component, and the popup doesn't open HOT 7
- [Enhancement] - Option to choose the element to focus on opening modal HOT 1
- [Bug] - Mismatch in default button label font size
- [Feature Request] - Hide and display a particular field in dynamic form HOT 1
- [Enhancement] - Ability to modify CSS or (change height or width) of fw-data-table of FwPlatformTable HOT 1
- [Bug] - Select Dropdown has binding issue when new search fields are selected HOT 1
- [Bug] - Cannot update text for fw-button HOT 1
- [Enhancement] - Add input password type inside fw-input, fw-form-control and fw-form schemas
- [Bug] - Events not emitted inside the fw-toast-message Component.
- [Bug] - FwKebabMenu is unresponsive at times
- [Enhancement] - Add empty result in DataTable (fw-data-table)
- [Enhancement] - Improve JavaScript to remove the need for 'unsafe-eval' in Content-Security-Policy directives.
- [Bug] - Crayons file uploader issue
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from crayons.