Dropdown: hard to identify error on non matching label

[raDiesle]

Describe the bug

On the applications, in special situations, errors happen in the following way:

this.getOptionLabel(...).toLocaleLowerCase is not a function

TypeError
  key: "matchesSearchValue",     
value: function matchesSearchValue(option) {       
var label = this.getOptionLabel(option).toLocaleLowerCase(this.props.filterLocale);       
return label.startsWith(this.searchValue.toLocaleLowerCase(this.props.filterLocale));     
} 

which is logged to the monitoring systems.

Unfortunately, its hard to understand. Instead it would be nice to print the context to value and options its trying to match to.

Its hard in the setup being able to reproduce, otherwise

Reproducer

No response

PrimeReact version

6.5.1

React version

17.x

Language

ES5

Build / Runtime

Create React App (CRA)

Browser(s)

Chrome110

Steps to reproduce the behavior

not so clear, probably when opening the dropdown with non matched value of options

Expected behavior

error is thrown, but with more understandable context information

[melloware]

Can you try with 8.2.0 or create a code sandbox reproducer to show the issue? I can't reproduce with 8.2.0.

[raDiesle]

Hi, as explain the issue is, that we dont know how to reproduce it, therefore some logging of context would be helpful.

The code in 8.2.0 is still the same. e.g. if options is null, or no optionLabel can be found, it will be thrown:

primereact/components/lib/dropdown/Dropdown.js

Line 317 in 26adfe2

const label = getOptionLabel(option).toLocaleLowerCase(props.filterLocale);

[melloware]

OK i submitted a PR to defend against that error. If the option label is NULL it should return false and not try and lowercase it.

[raDiesle]

Nice. So what will happen in that case?

Probably to show the key value in the dropdown and console error the key , where no label was found

[melloware]

that method returns true or false whether a match has been found. Throwing an error is not acceptable so returning false in that case means "no match was found".

[raDiesle]

I was not saying to throw an error, but to console log an info, warn or error.

what happens in case its returning false? I guess silently show the user the key value, right ?

[melloware]

No here was the original method.

const matchesSearchValue = (option) => {
        label = getOptionLabel(option).toLocaleLowerCase(props.filterLocale);
        return label.startsWith(searchValue.current.toLocaleLowerCase(props.filterLocale));
    }

If the call to getOptionLabel(option) returns undefined it will then throw the error you are seeing above trying to do toLocaleLowerCase on it which is NOT acceptable.

The fixed method does this where if the option is undefined the method returns false as its NOT a match.

const matchesSearchValue = (option) => {
        let label = getOptionLabel(option);
        if (!label) {
            return false;
        }
        label = label.toLocaleLowerCase(props.filterLocale);
        return label.startsWith(searchValue.current.toLocaleLowerCase(props.filterLocale));
    }

[raDiesle]

ye, i mean what the other code besides this function will do with the undefined. What is the final result for user and our JavaScript error logging ;)

I dont care about internal implementation, I only care about user and the logging system.

[melloware]

Once again without a Code Sandbox reproducer i can only fix the item based on the stack trace you provided above that was blowing up. If you can provide a reproducer I can look into more issues. Until then I have properly fixed the defect you reported above.

[raDiesle]

The problem is, that we cant reproduce it, because the javascript error to send to Sentry.io has insufficient information, caused by the PrimeReact component code. Could be case that options is rerendered with old value set on the input - no idea.

Therefore I suggest to create some if statement, and provide some contextual console.error information in case the error happens inside of the component. ( What are the current options, what is the key where primereact tries to get the label from)

getOptionLabel(...).toLocaleLowerCase

[melloware]

If you look in the component the only places toLocaleLowerCase() are used.

primereact/components/lib/dropdown/Dropdown.js

Line 41 in 4331d6e

const filterValue = filterState.trim().toLocaleLowerCase(props.filterLocale);

primereact/components/lib/dropdown/Dropdown.js

Lines 350 to 360 in 4331d6e

	const matchesSearchValue = (option) => {
	let label = getOptionLabel(option);
	if (!label) {
	return false;
	}
	label = label.toLocaleLowerCase(props.filterLocale);
	return label.startsWith(searchValue.current.toLocaleLowerCase(props.filterLocale));
	};

[raDiesle]

Yep I know, still it doesnt help me to understand how our users produce this error, as we miss context information of the situation, which would be possible to enhance in the component - also to implement a fallback behaviour instead of an exception you cannot understand

[melloware]

well if it helps both are around filtering....