[Vue-3] Cannot read property 'contains' of null at Proxy.focusIn

[alinkedd]

I've got multiple Cannot read property 'contains' of null at Proxy.focusIn errors at this line regarding this.$refs.root.

• Bug report

Tell about your platform

• Vue.js version : 3.0.11
• Browser name and version : Chrome 91.0.4472.106 (Dev), Firefox 89.0.1
• This package version : 4.0.2

Current behavior
Cannot read property 'contains' of null at Proxy.focusIn errors in browser developer console.

Expected behavior
No errors regarding nullish elements in browser developer console.

Minimal reproduction of the problem with instructions
I have vue-cli project and was getting this error only after building it and serving it at some domain.

I might have got this problem because of possibly wrong component usage such as following:

  <div v-show="loading" class="loading-container">
    <div>
      <Loading
        active
        loader="dots"
        :is-full-page="false"
      />
    </div>
  </div>

I thought I did not need v-model, cause custom component appearance was controlled by loading prop and Loading component was always active. After adding additional ref variable drived by loading prop, error is gone:

  <div v-show="active" class="loading-container">
    <div>
      <Loading
        v-model:active="active"
        loader="dots"
        :is-full-page="false"
      />
    </div>
  </div>
  

  
  setup(props) {
    const { loading } = toRefs(props);

    const active = ref<boolean>(loading.value);

    watch(loading, (value) => {
      active.value = value;
    });

    return {
      active,
    };
  },

Aftewards, I just wanted to know if v-model is required (even if only UI is needed in some cases) and propose to add some check to this.$refs.root.

[ankurk91]

I am not sure if you are reporting a bug or asking the right way to use the component.

But if you can make a minimal re-pro on js-fiddle or codesandbox, and write steps to re-produce the issue, would be helpful.

Tip: Please use the component as described in docs.

[alinkedd]

I am not sure if you are reporting a bug or asking the right way to use the component.

@ankurk91 kinda both, 'cause even if it's not supposed to happen due to inaccurate usage, imho it's better to check if element is not null.

Check example.

Steps to reproduce:

1. Open container
2. Click on green box
3. Close and open container
4. Click on green box again

[ankurk91]

-<div v-show="active" class="loading-container">
+<div class="loading-container">
    <div>
      <Loading
        v-model:active="active"
        loader="dots"
        :is-full-page="false"
      />
    </div>
  </div>

Actually you no need to add v-if to parent container.
If you are adding a v-if on parent, you are forcing vue to remove the element from DOM and re-create it.
This is overhead on browser.
The v-model on component will cause it to hide/show, this way component no need bind all events again.

Regarding, checking if this.$refs.root is null, i believe when the component is mounted the this.$refs.root must be always available. I need to investigate why it is null.

[ankurk91]

It has been one year and no one has reported similar issue