[REACT] Validation required fields in Events

[stefan.siepmann]

Good morning,

I have a problem with the validation of required fields during creating an Event.

The first time I open the EventEditor the required fields are not marked in red (what is expected - I expect only an error if the user trys to save) end then I close the event by cancel. The next time I want to add an event the required fields are marked in red to be required which confuses the user.
I also tried to add the clearError methode to the cancel functionallity without any impact.

So I solved the issue working for me but for me it is like a workaround and I guess it is a not expected behavoiur I discribed before. I set the skipValidation: true for the fields and create my own validation

const editor = this.features?.taskEdit?.editor;
          const widgetMapSeceItIdField = editor?.widgetMap?.seceItId;
          const widgetMapAddressField = editor?.widgetMap?.addressField;

      const isEmpty = (val: any) =>
        val === undefined || val === null || (typeof val === 'string' && val.trim() === '');

      const showTempError = (field: any, message: string) => {
        field.setError(message);
        field.element.classList.add('b-invalid');
        setTimeout(() => {
          field.clearError(message);
          field.element.classList.remove('b-invalid');
        }, 3000);
      };

      const missingSeceItId = isEmpty(seceItId);
      const missingAddress = isEmpty(addressField);

      if (missingSeceItId || missingAddress) {
        if (missingSeceItId && widgetMapSeceItIdField) {
          showTempError(widgetMapSeceItIdField, 'Dieses Feld ist erforderlich');
        }
        if (missingAddress && widgetMapAddressField) {
          showTempError(widgetMapAddressField, 'Dieses Feld ist erforderlich');
        }
        const messages: string[] = [];
        if (missingSeceItId) messages.push('Pflichtfeld SeceIT ID fehlt');
        if (missingAddress) messages.push('Es wurde keine gültige Adresse eingegeben');
        showSnackbar(messages.join(' • '), 'error');
        return false;
      }

Can you have a look if it is a bug or give me a hint if I use the validation a wrong way?

Thanks in advice!
Stefan

[tasnim]

How can we reproduce the issue you're facing? Are you able to reproduce it here https://bryntum.com/products/schedulerpro/examples/constraints/? What are the steps we should follow to reproduce the issue?

[stefan.siepmann]

Hi,

No it is not possible to created it in your system.

I cusomized the event Edit/Add calling from BryntumScheduler
const taskEditConfig = useMemo(() => useTaskEditConfig(permissions), [permissions]);

I added two fields on the generalTab

seceItId: {
            type: 'textField',
            label: 'SeceIT ID',
            name: 'seceItId',
            hidden: true,
            editable: true,
            readOnly: false,
            weight: 3,
            required: true,
            showRequiredIndicator: true,
            skipValidation: true,
            placeholder: 'Geben Sie die SeceIT ID ein',
          },
          addressField: {
            type: 'combo',
            label: 'Adresse',
            name: 'addressField',
            emptyText: 'Keine Adresse gefunden',
            hidden: true,
            editable: true,
            readOnly: false,
            weight: 4,
            store: {
              type: 'ajaxstore',
              readUrl: `${client.defaults.baseURL}/addressValidation`,
            },
            displayField: 'label',
            valueField: 'id',
            filterParamName: 'query',
            minChars: 10,
            keyStrokeFilterDelay: 200,
            required: true,
            showRequiredIndicator: true,
            skipValidation: true,
            placeholder: 'Geben Sie eine Adresse ein',
            listeners: {
              async input(event: any) {
                if (event.value && event.value.length >= 10) {
                  const newToken = await getJWTToken();
                  if (event.source && event.source.store) {
                    event.source.store.headers = { Authorization: `Bearer ${newToken}` };
                  }
                }
              },
            },
          },

Those two fields are not filled by default.

[tasnim]

I can't reproduce the issue with your code as well as it is not runnable! Though I've tried adding it to our demo, but not reproducible as the data you're loading in the combo store are missing and also your model fields are different from our demo!

So could you please share a runnable test case (a React app except the node_modules folder) which we can run it with npm i && npm start and check it on our side what's wrong?