Unable to clear a combobox value binded to NumberModel

Roman_Kardonsky · January 7, 2025, 7:16pm

Hello.
There is a combobox that binded to NumberModel:

<ComboBox label="Status" items={statusTypes as SelectItem[]} value={String(request.statusType)} {...field(model.statusType)} clearButtonVisible />

When I select an item and click clear button, the component shows validation error “must be a number”
Is it possible to deselect the value in a correct way?

Tatu2 · January 9, 2025, 11:19am

Yes, I recall there was some weirdness about clearing the form, so I needed to add special handling for ComboBox, IntegerField

github.com

TatuLund/hilla-v2-demo/blob/v24/frontend/views/todo/useTodos.tsx#L183


      
            setAdding(true);
            clearForm;
            // clear(); // read(TodoModel.createEmptyValue());
          }
          
          /**
           * Clears the form by setting the task and priority to empty values.
           * This is a workaround for a bug in the ComboBox and IntegerField components.
           * @returns void
           */
          function clearForm() {
            const empty = TodoModel.createEmptyValue();
            empty.task = ""; // ComboBox does not accept undefined
            empty.priority = 0; // IntegerField does not accept undefined
            read(empty);
          }
          
          /**
           * Updates the status of a todo.
           *
           * @param todo - The todo to update.

And I filed a ticket about it

github.com/vaadin/hilla

Model's createEmptyValue uses "undefined" as empty value for all properties, but this is not compatible with all fields.

opened 07:23AM - 07 Mar 24 UTC

TatuLund

bug hilla

### Describe the bug Model's createEmptyValue uses `undefined` as empty value f…or all properties, but this is not compatible with all fields. `Binder` / `useForm` `clear()` function uses this function internally in attempting to clear the form. This leads to various complications, e.g. `IntegerField` will give the following warning as `undefined` is not accepted by it. ![image](https://github.com/vaadin/hilla/assets/14309836/398c0033-2986-4114-8d70-c56d5c17ba0c) With `ComboBox` there is more silent issue, it does not give warning, but it is just not cleared, as one should use empty string instead. There are probably issues multiple other fields too. This applies to both Hilla/React and Hilla/Lit version 2.5+ See the related ticket https://github.com/vaadin/hilla/issues/121 I used the following workaround to get rid of the issue, i.e. do not use clear, but generate empty object and patch it with suitable values for the fields that do not otherwise work. ``` function clearForm() { const empty = TodoModel.createEmptyValue(); empty.task = ''; // for ComboBox empty.priority = 0; // for IntegerField read(empty); } ``` ### Expected-behavior `clear()` function from `useForm` and `Binder` should properly empty the form. ### Reproduction Trivial. Create form with `IntegerField` and `ComboBox` and use clear() to empty it. ### System Info Hilla 2.5