Error when using @blur on ui-textfield

[jfrag]

<ui-textfield v-model="data.msgStr" @blur="blurField(data)" fullWidth outlined></ui-textfield>

Uncaught TypeError: Cannot read property '0' of undefined at Object.isCheckboxAtRowIndexChecked (balm-ui.js:formatted:17010) at e.handleRowCheckboxChange (balm-ui.js:formatted:16782) at HTMLTableSectionElement.handleRowCheckboxChange (balm-ui.js:formatted:16880)

Error appear only when a value is entered. If you blur without changing value no error happen

[elf-mouse]

Hi @jfrag ,

I have to test your code in vue2&3, and no errors happened.

Could you give a minimal complete example to reproduce this problem! like this:

<ui-textfield
    v-model="data.msgStr"
    fullwidth
    outlined
    @blur="blurField(data)"
  ></ui-textfield>

NOTE: fullwidth prop is not fullWidth.

export default {
  data() {
    return {
      data: {
        msgStr: ''
      }
    };
  },
  mounted() {
    setTimeout(() => {
      this.data.msgStr = 'Hello';
    }, 1e3);
  },
  methods: {
    blurField({ msgStr }) {
      console.log(msgStr);
    }
  }
};

[jfrag]

Hi,

My interface is a list of ui-textfield inside a ui-table

When i set the param row-checkbox to true the error disappear

<ui-table fullwidth :data="orderedLang" :thead="langHead" :tbody="langBody">
  <template #trad-val="{ data }">
    <ui-textfield v-model="data.msgStr" @blur="blurField(data)" fullwidth outlined></ui-textfield>
  </template>
</ui-table>

export default {
  data() {
    return {
      langList: {
        "a3786f3cef62ea00d7b62d774a7418be":{
          "msgId":"Language already exist",
          "msgStr":"",
          "msgStrPlurals":[],
          "flags":[],
          "translatorComments":[],
          "developerComments":[],
          "reference":["myRef"]
        },
        "2a07e356a2c9f6e1600ac7084e0df489":{
          "msgId":"Update completed",
          "msgStr":"",
          "msgStrPlurals":[],
          "flags":[],
          "translatorComments":[],
          "developerComments":[],
          "reference":["myRef2"]
        }
      },
      langHead : ['Text', 'Taduction'],
      langBody:[
        'msgId',
        {
          slot:'trad-val',
          value:'msgStr'
        }
      ]
    };
  },
  computed: {
    orderedLang() {
      return _.orderBy(this.langList, ['value']);
    }
  },
  methods: {
    blurField(field) {
      console.log(field);
    }
  }
};

The error occur when i write in the textfield and fire the blur event.

[elf-mouse]

Thanks @jfrag , I will check this problem.

[elf-mouse]

Hi @jfrag ,

The problem has been confirmed, it's an official MDC (@material-components) data-table component bug.

I will fix the problem in the next patch.

Thanks again :)

[jfrag]

Hi @elf-mouse ,

Thank you for your fast reply !

You're doing a very good job !

[elf-mouse]

This bug has been fixed now.

• balm-ui@8.9.2 for vue2
• balm-ui@9.2.1 for vue3