I have a simple page that uses vuetify combobxes and vuetify inputs. I have been working on a way to switch focus of the comboboxes when an added item is confirmed to be added to the list. This works correctly and the focus does take hold.
The issue I am having is when there is text in the combobox and you click anywhere else outside of the combobox or on the top edge of another combobx, I get the following error
[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'id' of null"
TypeError: Cannot read property 'id' of null
If I click directly in the next input the focus changes as expected
I think this error is coming from this method
thisFocus(event) {
const controlName = this.setToTitleCase(event.target.id);
if (this.currentFocus && this.showDialog &&
event.target.id !== 'condition') {
this.nextFocus = controlName;
return
}
this.currentFocus = controlName;
}
I also have an example setup in a code sandbox as well you can find it here
Sample code with error
I am looking for some help to resolve this error or at least get pointed in the right direction
EDIT: To better clarify this issue, what I have gathered is the control highlighted in blue in the image below is the complete v-combobox component of vuetify.
The v-combobox component has another component inside the combobox component used for messaging as shown in the highlighted area of the image below.
The issue I am having is that if you happen to click on that message area rather than the input component. I believe I understand why the event.relatedTarget is null but I can't figure out what I need to make sure the focus goes to the correct input component if you happen to click on the message area.
Copyright Notice：Content Author:「DRW」，Reproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/62294822/vuetify-combobox-issue-when-clicking-on-the-edge-of-another-combobox-or-outside