En mi componente principal, llamo al componente secundario como:
<c-multiselect-picklist multi-picklist-values={picklistValues} onselect={handleChange} preselected-string={selectedPicklistValue} data-id="first"></c-multiselect-picklist>JS:
picklistValues = {}; picklistOptions = [ { label: 'First', value: 'First'}, { label: 'Second', value: 'Second'}, { label: 'Third', value: 'Third'}, { label: 'Fourth', value: 'Fourth'} ]; connectedCallback() { this.picklistValues.label = ''; this.picklistValues.optionsToSelect = this.picklistOptions; this.selectedPicklistValue = 'Some String'; }En la interfaz de usuario, tengo un botón de reinicio y, al hacer clic en él, me gustaría restablecer el LWC secundario de selección múltiple al estado inicial sin ninguna selección. Cómo se puede lograr esto en LWC.
Intenté hacer picklistValues como nulo, pero aún así el cuadro combinado relámpago muestra las opciones seleccionadas.
Como ya se comentó, es difícil saber qué funcionaría para su cuadro combinado personalizado sin ver su implementación real, sin embargo, puedo mostrarle una solución funcional:
Cuadro combinado de selección múltiple
Escribí un artículo sobre cómo crear un cuadro combinado de selección múltiple LWC que podría ayudarlo: https://medium.com/@svierk/how-to-create-the-lwc-multi-select-combobox-that-salesforce-is -aún-desaparecido-c7bf3a2850dd
El código fuente, incluidas las pruebas unitarias de JEST y los comentarios de JSDoc, está disponible aquí: https://github.com/svierk/awesome-lwc-collection/tree/main/force-app/main/default/lwc/multiSelectCombobox
Restablecer la selección actual
Para restablecer la selección actual desde el exterior usando, por ejemplo, un botón, solo tiene que agregar un método de restablecimiento y ponerlo a disposición del exterior usando la anotación @api . Si usa mi componente, este método se vería así:
@api reset() { this.selectedItems = this.placeholder; this.currentOptions = []; this.selectedOptions = []; this.isLoaded = false; }Luego puede llamar a su método de reinicio desde el componente principal respectivo a través del selector de consulta:
this.template.querySelector('c-multi-select-combobox').reset();