'ui-select' never gets invalid when using 'default-label' / 'default-value' props

[LEVI-RIVKIN]

Hi.

It seems like the ui-select element never gets the invalid class when using any falsy value for default-value, which causes the ui-select-helper to never show as invalid.

I think I've figured out why.
The material component checks whether the first value is falsy to determine whether the select is valid or not ( https://github.com/balmjs/balm-ui/blob/main/src/material-components-web/select/foundation.js#L377 ).

It seems like this line of the vue component will always cause any falsy value to become ' ' -
defaultOption[this.optionValue] = this.defaultValue || ' '; // NOTE: fix floating label bug when the value is empty
( https://github.com/balmjs/balm-ui/blob/main/src/scripts/components/select/select.vue#L314 ).

So the material component will never get a falsy value for the default value, causing it to never be invalid.

My solution was to simply add the 'default' option as the first option in the options list instead of using the default-label/default-value prop. But that is still a bug.

Example:

<ui-form-field>
	<ui-select v-model="selectedValue" :options="options" required
	           default-label="Select" default-value="" helper-text-id="select-helper"></ui-select>
	<ui-select-helper id="select-helper" :valid-msg="true">
		Value is required
	</ui-select-helper>
</ui-form-field>

Environment:

• BalmUI version: 10.6.0
• Browser: Chrome
• OS: Windows

[elf-mouse]

Hi @LEVI-RIVKIN,

Because of the <ui-textfield-helper> and <ui-select-helper> have very limited ability to validate rules, so it is recommended to use BalmUI validator to validate all form data and customize the style of the validation.

like this:

<ui-form>
  <ui-form-field>
    <ui-select
      v-model="formData.selectedValue"
      :options="options"
      required
      default-label="Select"
      default-value=""
      helper-text-id="select-helper"
    ></ui-select>
    <ui-select-helper id="select-helper" :visible="!!message">
      {{ message }}
    </ui-select-helper>
  </ui-form-field>
  <ui-form-field>
    <ui-button @click="onSubmit">Submit</ui-button>
  </ui-form-field>
</ui-form>

import { reactive, toRefs } from 'vue';
import { useValidator } from 'balm-ui';

const validator = useValidator();

const validations = [
  {
    label: 'Select',
    key: 'selectedValue',
    value: '',
    validator: 'required' // Customizable
  }
];

const options = [
  {
    label: 'A',
    value: 1
  }
];

const state = reactive({
  formData: {
    selectedValue: ''
  },
  message: ''
});
const { formData, message } = toRefs(state);

function onSubmit() {
  const { valid, message } = validator.validate(state.formData);

  state.message = message;

  if (valid) {
    console.log('gg');
  }
}

Thank you for your issue :)

[LEVI-RIVKIN]

Hi @elf-mouse .
Thanks for your answer.

Well, in my humble opinion that's not a solution but a workaround.
I think the 'balm-ui' components should not break the behavior of the core material components, and in this case it does.

As I mentioned I'm not in need of a workaround, I already have one which works fine.
I opened this issue to let you guys know you have a broken behavior which you probably didn't intend for.
As far as I'm concerned this issue can be closed if you guys are ok with it..

[elf-mouse]

Hi @LEVI-RIVKIN ,

I will consider compatibility with this issue in the subsequent upgrade process.

Thanks again~