File tree Expand file tree Collapse file tree
packages/stencil-library/src/components/dnn-autocomplete Expand file tree Collapse file tree Original file line number Diff line number Diff line change @@ -110,10 +110,7 @@ export class DnnAutocomplete {
110110
111111 @Watch ( "value" )
112112 handleValueChange ( newValue : string ) {
113- this . displayValue = newValue ;
114-
115- // Find the index of the selected item
116- this . selectedIndex = this . suggestions . findIndex ( s => s . value === newValue ) ;
113+ this . selectItemFromValue ( newValue ) ;
117114 }
118115
119116 /** attacth the internals for form validation */
@@ -128,6 +125,12 @@ export class DnnAutocomplete {
128125 this . focused = false ;
129126 }
130127 }
128+
129+ componentDidLoad ( ) {
130+ if ( this . value != "" ) {
131+ this . selectItemFromValue ( this . value ) ;
132+ }
133+ }
131134
132135 componentDidRender ( ) {
133136 if ( this . focused && this . suggestions . length > 0 && ! this . positionInitialized ) {
@@ -164,6 +167,11 @@ export class DnnAutocomplete {
164167 this . searchQueryChanged . emit ( value ) ;
165168 }
166169
170+ private selectItemFromValue ( value : string ) {
171+ this . selectedIndex = this . suggestions . findIndex ( s => s . value === value ) ;
172+ this . displayValue = this . selectedIndex != - 1 ? this . suggestions [ this . selectedIndex ] . label : value ;
173+ }
174+
167175 private handleInvalid ( ) : void {
168176 this . valid = false ;
169177 if ( this . customValidityMessage == undefined ) {
You can’t perform that action at this time.
0 commit comments