I have an edit form and I'm trying to unlock the Save button only if the form has any changes compared to what data was loaded at the beginning of the form.

It works fine for various input types, but unfortunately it doesn't work at all for ComboBox. I don't know what could be wrong here, because formally everything looks fine and works for other input types. Does anyone have any idea why?

;fiddle/3te7

form = Ext.widget('form', {
    id: 'gridPopUpForm',
    cls: 'form form--full-width',
    bodyCls: 'form__body',
    scrollable: true,
    listeners: {
      dirtychange: () => {
        const saveButton = form.up().down('#gridPopUpFormSaveButton')
        console.log('dirtychange')
        console.log(`isDirty: ${form.isDirty()}`)

        saveButton.setDisabled(!form.isDirty())
      },
      change: () => {
        console.log('change')
      },
      validitychange: (_, valid) => {
        const disabled = !valid
        const saveButton = form.up().down('#gridPopUpFormSaveButton')

        saveButton.setDisabled(disabled)
      },
    },
  })

field.listeners = {
        ...field.listeners,
        change: (field, newValue, oldValue) => {
          if (column?.dependants?.length) {
            this.handleDependentFields(column)
          }

          console.log(field, newValue, oldValue)
        },

        afterRender: (field) => {
          if (column?.dependants?.length) {
            this.handleDependentFields(column)
          }
          console.log(field)
        },

        dirtyChange: (field, isDirty) => {
          const formWindow = field?.up('#gridPopUpFormWindow')
          const saveButton = formWindow?.down('#gridPopUpFormSaveButton')

          console.log(`isDirty: ${isDirty}`) // if combobox is true after form render
          saveButton?.setDisabled(!isDirty)
        },
      }