Apex Code Development You need to sign in to do that
Don't have an account?
Vishwas B N lightning-combobox onblur and onfocus not properly working
Hi Team,
I have a lightning-combobox element in my modal view. I need to make modal body little larger on clicking the lightning-combobox element and to original size when out of focus.
But i am not getting the expected behaviour. On focus of lightning-combobox, the modal body is becoming larger but not listing the option.
Below are my code for better under standing.
file.html
<div class="slds-col slds-size_1-of-2">
<lightning-combobox required class="newrecordvalidation" label="Department" name="department_id" value={newqcchecklist.department_id} placeholder="Departments" options={departmentlistoptions} onchange={tracknewvaluechange} onfocus={addmodalclass} onblur={removemodalclass}></lightning-combobox>
</div>
file.css
.modalBody {
height: 220px;
}
file.js
addmodalclass(){
this.template.querySelector('[data-id="modal-content-id-2"]').classList.add('modalBody');
}
removemodalclass(){
this.template.querySelector('[data-id="modal-content-id-2"]').classList.remove('modalBody');
}
Video Clip : https://vimeo.com/571163587
Can you please help
I have a lightning-combobox element in my modal view. I need to make modal body little larger on clicking the lightning-combobox element and to original size when out of focus.
But i am not getting the expected behaviour. On focus of lightning-combobox, the modal body is becoming larger but not listing the option.
Below are my code for better under standing.
file.html
<div class="slds-col slds-size_1-of-2">
<lightning-combobox required class="newrecordvalidation" label="Department" name="department_id" value={newqcchecklist.department_id} placeholder="Departments" options={departmentlistoptions} onchange={tracknewvaluechange} onfocus={addmodalclass} onblur={removemodalclass}></lightning-combobox>
</div>
file.css
.modalBody {
height: 220px;
}
file.js
addmodalclass(){
this.template.querySelector('[data-id="modal-content-id-2"]').classList.add('modalBody');
}
removemodalclass(){
this.template.querySelector('[data-id="modal-content-id-2"]').classList.remove('modalBody');
}
Video Clip : https://vimeo.com/571163587
Can you please help
Can you please add alert in both function, and after please let me know
Thank you for your response.
I did add the alert in to onblur and onfocus function. And it is running in loop.
So i just tried adding console.log() in both functions.
On focusing the combobox the focus, console log is printing every time. Issue is with showing the option. How can i able to make it load option after calling onfocus function ?(ideally it should show options right ?)
Can you tell me, am i doing something wrong in code, which stop loading option on becoming focused?
Thank you in advance.