Broken validation messages for max and min for numerical fields.

[peterkmurphy]

Good day developers.

The software I am working on is campaign software, and it allows the user to look for former campaigners by various criteria, such as their age. This seems to be a straight forward case of using a numerical field (the age) to filter by, with a minimum of zero. I am using operators such as 'less', but I prefer to use language like "Younger than" instead of "<". So I use a Config variable file like:

const initialConfig = MuiConfig;

export default function useQueryBuilderConfig(): Config {

  return useMemo(() => {
    return {
      ...initialConfig,
      settings: {
        ...initialConfig.settings,
        removeInvalidMultiSelectValuesOnLoad: true,
        removeIncompleteRulesOnLoad: true,
        showErrorMessage: true,
      },
      fields: {
        age: {
          label: 'Age',
          type: 'number',
          operators: ['equal', 'less', 'less_or_equal', 'greater', 'greater_or_equal'],
          widgets: {
            number: {
              opProps: {
                equal: {
                  label: 'Equal to',
                },
                less: {
                  label: 'Younger than',
                },
                less_or_equal: {
                  label: 'Younger than or equal to',
                },
                greater: {
                  label: 'Older than',
                },
                greater_or_equal: {
                  label: 'Older than or equal to',
                },
              } as Optional<Operator<Config>>,
            },
          },
          fieldSettings: {
            min: 0,
          },
        },
      },
    };
  }, [...]);
}

So imagine if I go to the Age field, and type in "-7". I expect to see something like "Value should be greater than 0". What I see is

"Value -7 should be from 0 to {{fieldSettings.max}}".

Imagine if I change the field settings to something like:

          fieldSettings: {
            max: 100,
          },

And enter "101" in the Age field. Now I see "Value 101 should be from {{fieldSettings.min}} to 100", instead of something like "Value should be less than 100".

Fortunately, if the field settings have both min and max in it, like:

          fieldSettings: {
            min: 0,
            max: 100,
          },

They typing something like "101" gives me a nicer "Value 101 should be from 0 to 100".

For my application, I have "@react-awesome-query-builder/mui": "^6.5.1", with "@mui/material": "^5.11.0", "react": "^18.2.0", and "vite": "^4.4.9". I have showErrorMessage: false for my application for now, but I can see in the near future I might need to set it back to true.

[peterkmurphy]

Thank you @ukrbublik for the quick turnaround!