Console errors when having radio buttons inside of a ui-skeleton

[HDShabe]

Development Relevant Information:

• BalmUI version: 10.19.0
• Browser: Chrome
• Operating System: Windows

Hi,

When I have a ui-skeleton that has some radio buttons within it, I'm getting the following console error (I use the skeleton in other places and don't get the error, and removing the radio button group to test stops the errors)

balm-ui.esm.js:1 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'querySelector') at t.get (balm-ui.esm.js:1:370919) at Object.registerInteractionHandler (balm-ui.esm.js:1:370560) at t.registerRootHandlers (balm-ui.esm.js:1:53603) at t.init (balm-ui.esm.js:1:51720) at t.e (balm-ui.esm.js:1:47563) at new t (balm-ui.esm.js:1:60261) at t.createRipple (balm-ui.esm.js:1:370771) at new t (balm-ui.esm.js:1:369392) at balm-ui.esm.js:1:371988

It doesn't seem to break anything on the page, just the error in the console.

Any ideas?

Cheers!

[elf-mouse]

Hi @HDShabe ,

Sorry, I wasn't able to reproduce the problem.

My example:

<ui-skeleton
  :loading="loading"
  active
  :avatar="{ size: 'large', shape: 'square' }"
>
  <ui-form-field>
    <ui-radio v-model="gender" input-id="male" value="M"></ui-radio>
    <label for="male">Male</label>
  </ui-form-field>
  <ui-form-field>
    <ui-radio v-model="gender" input-id="female" value="F"></ui-radio>
    <label for="female">Female</label>
  </ui-form-field>
</ui-skeleton>

Can you provide us with your examples?

[HDShabe]

Hi @elf-mouse

Apologies for getting back to you so late, I've had another look at this and after investigation found that the error only occurs on this page as I was newing up a viewmodel for the page in a different way to usual.

Page:

<template>
    <ui-skeleton :loading="viewModel.pageLoading"
                 active>
        <div>
            Search by:
            <ui-form-field>
                <ui-radio v-model="viewModel.searchType" input-id="option1Radio" value="option1"></ui-radio>
                <label for="option1Radio">Option 1</label>
            </ui-form-field>
            <ui-form-field class="radio-button">
                <ui-radio v-model="viewModel.searchType" input-id="option2Radio" value="option2"></ui-radio>
                <label for="option2Radio">Option 2</label>
            </ui-form-field>
        </div>
    </ui-skeleton>
</template>

Script working:

<script lang="ts">
    import { defineComponent } from 'vue';

    class TestViewModel {

        constructor() {
            this.searchType = 'option1';
            this.pageLoading = false;
        }

        //search criteria
        searchType: String;

        //loading flags
        pageLoading: Boolean;

    }

    export default defineComponent({
        data() {
            return {
                viewModel: TestViewModel,
            }
        },
        mounted() {
            this.viewModel = new TestViewModel();
            this.viewModel.pageLoading = true;
            //do some work
            this.viewModel.pageLoading = false;
        }
    });
</script>

Script broken

export default defineComponent({
        data() {
            return {
                viewModel: new TestViewModel(),
            }
        },
        mounted() {
            this.viewModel.pageLoading = true;
            //do some work
            this.viewModel.pageLoading = false;
        }
    });

Though in honesty, it isn't always broken...I'm happy for you to close the ticket for now and i'll keep an eye on it, unless you have any other thoughts?

[elf-mouse]

This is related to the component rendering lifecycle.

• Method 1:

  class TestViewModel {
    constructor() {
      this.searchType = 'option1';
      this.pageLoading = true;
    }
  }

• Method 2:

  import { nextTick } from 'vue';
  
  class TestViewModel {
    constructor() {
      this.searchType = 'option1';
      this.pageLoading = false;
    }
  }
  
  export default {
    // ...
    mounted() {
      nextTick(() => {
        this.viewModel.pageLoading = true;
      });
    }
  }

[HDShabe]

Thanks for your help, I'll close the ticket : ) Cheers.