Uncaught Error: flushSync was called from inside a lifecycle method. It cannot be called when React is already rendering about react-bootstrap-typeahead

[duhmojo]

I was inspecting _this in hideMenu and the inputNode can be used to detect if the menu is rendered in the DOM. e.g. if _this.inputNode.offsetParent is undefined it's not rendered. Probably a more standard way of detecting this.

[ericgio]

Hey @duhmojo, thanks for opening this issue, and for the detailed repro steps and additional investigation. It looks like the flushSync call is coming from react-popper which controls the menu overlay. As far as I can tell, the component is still mounted when setState is called, so it's possible there's some kind of race condition going on.

I plan to drop the react-popper dependency in a future version and the error no longer repros with the update, so I think it's safe to ignore the error for now and it will be resolved going forward, probably in v7.

[hanorine]

@ericgio when would v7 come out? I would like to find a way to resolve this issue. Will ignore the warning for now. Thank you for your time.

[duhmojo]

I'm going to comment on this issue with my work around. I ignored this for months then had to come back to it.

I was able to set a ref for Typeahead, then onBlur get the ref and call hideMenu() to force the menu closed before anything else in the React lifecycle could execute.

                                            this.searchRefs[field.name] = React.createRef();
                                            return (
                                                <Col key={index}>
                                                    <FormGroup>
                                                        <Form.Label>
                                                            {field.label}
                                                        </Form.Label>
                                                        <Typeahead
                                                            ref={this.searchRefs[field.name]}
                                                            onBlur={(e) => {
                                                                if (this.searchRefs[field.name] !== undefined) {
                                                                    this.searchRefs[field.name].current.hideMenu();
                                                                }
                                                            }}

I will say that hideMenu was no where in the docs, but was in the reference object and code.