Suggest2 does not render text box values on page load and text input dissapears

[moon1ock]

This can be seen on the Blueprint docs

Screen.Recording.2022-12-15.at.13.32.59.mov

[moon1ock]

Even though it might look like expected behavior, I am not sure if it is (am open to discussion)

The rationale is based on this code:

[moon1ock]

in packages/select/src/components/suggest/suggest2.tsx

    private getPopoverTargetRenderer =
        (listProps: QueryListRendererProps<T>, isOpen: boolean) =>
        // eslint-disable-next-line react/display-name
        ({
            // pull out `isOpen` so that it's not forwarded to the DOM
            isOpen: _isOpen,
            // pull out `defaultValue` due to type incompatibility with InputGroup
            defaultValue,
            ref,
            ...targetProps
        }: Popover2TargetProps & React.HTMLProps<HTMLInputElement>) => {
            const { disabled, fill, inputProps = {}, inputValueRenderer, popoverProps = {}, resetOnClose } = this.props;
            const { selectedItem } = this.state;
            const { handleKeyDown, handleKeyUp } = listProps;

            const selectedItemText = selectedItem == null ? "" : inputValueRenderer(selectedItem);
            const { autoComplete = "off", placeholder = "Search..." } = inputProps;
            // placeholder shows selected item while open.
            const inputPlaceholder = isOpen && selectedItemText ? selectedItemText : placeholder;
            // value shows query when open, and query remains when closed if nothing is selected.
            // if resetOnClose is enabled, then hide query when not open. (see handlePopoverOpening)
            const inputValue = isOpen ? listProps.query : selectedItemText ?? (resetOnClose ? "" : listProps.query);

Consider that
const selectedItemText = selectedItem == null ? "" : inputValueRenderer(selectedItem); always replaces a null in selectedItemText to an empty string,

However the nullish coalescing here
const inputValue = isOpen ? listProps.query : selectedItemText ?? (resetOnClose ? "" : listProps.query);
checks whether selectedItemText is null and if it is -- renders props.query

selectedItemText is never null and "" is not equal to null

resultantly, the field always evaluates to empty string, even when it's supposed to render selectedItemText.

Due to this, our front end does not pre-populate these text boxes on page load. (This was discussed on slack and ghe, will not link here).

[moon1ock]

@ted-jenks for SA and collaboration

[adidahiya]

Good catch; this certainly looks like a regression from Suggest. I don't have a v4 documentation link with a Suggest demo but you can see it working correctly in v3: https://blueprintjs.com/docs/versions/3/#select/suggest

The regression is due to a bad port of this line from Suggest to Suggest2 (?? behaves differently from ||):

blueprint/packages/select/src/components/suggest/suggest.tsx

Line 203 in ddecb32

: selectedItemText || (this.props.resetOnClose ? "" : listProps.query);

blueprint/packages/select/src/components/suggest/suggest2.tsx

Line 250 in ddecb32

const inputValue = isOpen ? listProps.query : selectedItemText ?? (resetOnClose ? "" : listProps.query);

[moon1ock]

Thank you @adidahiya @ted-jenks !!