AutoComplete: shows "[object Object]" if value object instance is not one of suggestions

[VsevolodGolovanov]

I'm submitting a ... (check one with "x")

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://forum.primefaces.org/viewforum.php?f=57

Codesandbox Case (Bug Reports)
https://codesandbox.io/s/primereact-test-yus1p

Current behavior
Initial value object is shown as "[object Object]" in the autocomplete field.
Selected value object is shown as "[object Object]" in the autocomplete field.

Expected behavior
Value objects should be shown using the provided selectedItemTemplate function.

Minimal reproduction of the problem with instructions
Open the showcase. See "[object Object]" in the field.
Type something into the field, select one of the suggestions. See "[object Object]" in the field.

Please tell us about your environment:

• React version:
  16.3.1

• PrimeReact version:
  4.2.1

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  Firefox 77.0.1

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[VsevolodGolovanov]

Likely a bug introduced by the #1296 fix.
This worked fine in PR 4.1.2: https://codesandbox.io/s/primereact-test-h50nn
Of course you had to work around #1296 with a typeof check in the selectedItemTemplate.

[kashifshamaz21]

@VsevolodGolovanov @aloker Any luck with this issue and a fix for it? I'm running into this issue too.
In my case, I have a different condition leading to this issue:
When my backend API fails for any reason, I need to show an error message. The UX is to show this error message looking like a dropdown suggestion.
So here's what I've done to achieve this UX :

searchAPI({ query }).then((response: any) => {
            const searchResults = response.queryResult;
            this.setState({ suggestions: [...searchResults], apiError: false });
        }, (error: any) => {
            console.log('SearchEntity: API Error while searching for: ', entityType);
            this.setState({ 
                suggestions: [{ id: -1, name: ''}],
                apiError: true
            });
        });

itemTemplate(item) {
        return (
            this.state.apiError ? <div className={styles.searchError}>{this.errorTemplate()}</div> :
            <div className={styles.itemSuggestion}>
                <span className={styles.itemSuggestionName}>{item.name}</span>
                <span className={styles.itemSuggestionId}>({item.id})</span>
            </div>
        )
}

selectedItemTemplate(item) {
        return item.name;
}

errorTemplate() {
        const entityType = this.props.entityType;
        return `Error while searching for ${entityType.toLowerCase()}`
}

With the above setup, whenever API fails, an error message shows in the autocomplete dropdown. But, the problem is, if the user clicks on the Error message, the autocomplete renders "[object Object]" in the input element.

[VsevolodGolovanov]

@kashifshamaz21 , in your case I'd try working around the issue by preventing the error value from being selected. In your onChange or onSelect, if the new value is an error, then either leave the current value unchanged or set to null/undefined.

[VsevolodGolovanov]

This is not some obscure edge case btw. Showing projections for text search results, and only turning a projection into a full fledged object when user actually selects it - this is the most normal thing in the world.

[VsevolodGolovanov]

If there are no plans to fix this, consider rolling back the #1296 fix? At least that issue could be worked around trivially.

[melloware]

If you guys don't mind reviewing my PR I believe I have fixed both issues #1392 and the original #1296

[mertsincan]

I don't think it is correct to directly return the 'value' based on the type of 'value'. Users can define value differently and return a different value from selectedItemTemplate. My personal opinion for this issue is to assign the value given as value to the suggestion object. For your example;

constructor(props) {
    super(props);
    this.state = {
      query: "",
      value: { id: 1, objectName: "Number one" },
      suggestions: [{ id: 1, objectName: "Number one" }]
    };
    this.suggest = this.suggest.bind(this);
  }

You can directly change the suggestion in any query. It totally depends on your implementation.

[VsevolodGolovanov]

1. A suggestion object often contains stuff like matched string and info for highlighting. Those are not a part of the domain object represented by the suggestion.

A suggestion object could contain the corresponding domain object. In fact that's how it is in my actual code:

export class SearchResult {
	readonly matchedString: MatchedString;
	readonly value: SuperClassRef;
}

export class MatchedString {
	readonly value: string;
	readonly matches: MatchInfo[];
}

export class MatchInfo {
	readonly start: number,
	readonly end: number
}

I think this must be supported, the API just wouldn't make sense otherwise.

2. The next level would be to support values not coming from suggestions at all, but created in onSelect.

Would be great if this were supported, but it's not as quintessential as 1.