This page contains major changes and breaking changes for the next major version 4. If possible, we encourage you to already update your code accordingly.

Value property in form elements allows undefined

TLDR: all form elements will allow undefined for value property.

In the past, our form elements were not verify consistent in handling undefined for the value property. Some components were allowing undefined while others were not. The expected behavior for form elements is to allow undefined for value.

With ticket 1424629 we've fixed the behavior and now all components allow using undefined without runtime exceptions.

However, we've only changed the runtime behavior, not the TypeScript types. So components whose typings for value didn't allow undefined before are still not allowing it after the fix, even though at runtime it would be possible to use undefined.

We know that this is not an optimal solution because the TypeScript types aren't telling the truth now. However, we decided to not change the types because that would've been a breaking change and apps which have no checks for undefined in their code would suddenly see compile errors.

With version 4, also the TypeScript types will be changed and will explicitly include undefined. This way, TypeScript types and runtime behavior are aligned again.

For users of TypeScript this means: You will have to explicitly check for undefined if you access the value of a form element.

See this example code:

const select = document.querySelector("zui-select")

// before: OK
select.value.forEach(option => console.log("selected option", option))

// after: Compile error "select.value is possibly undefined"
select.value.forEach(option => console.log("selected option", option))

// after: OK
select.value?.forEach(option => console.log("selected option", option))

// after: OK
if(select.value) {
   select.value.forEach(option => console.log("selected option", option))
}