How to get rid of the automatic focus on ContextualMenu

[spplante]

I have been fighting with this for a few hours now and I can't seem to figure out something that should be so simple...

I am working on a search box with an "auto completion" feature. It basically consist of a simple SearchBox control with a ContextualMenu right underneath it that gets populated when there is available suggestions. The problem is, when typing in the search box, If I move my mouse over a suggestion from the ContextualMenu, my search box loses the focus because the ContextualMenu component stole it.

It was also happening after the ContextualMenu opens for the first time (when the first suggestion appears), but I managed to fix that by adding the shouldFocusOnMount property to false, that way it does not focus when opening. However, I do not find any property that allows me to turn off the focus happening on each individual item on the menu.

So far, the ONLY way I managed to make it work was by using the onRender property on the individual menu items and create them by myself, but I have to copy the whole original CSS so I find it way overkill just to fix my focus issue...

I also tried using focusZoneProps={{ disabled: true }} /> but that simply does nothing. This is my simple code as of now :

public render(): React.ReactElement<...> {
        return (
            <div className={ styles.searchBoxContainer }>
                <SearchBox placeholder={ this.props.strings.placeholder } 
                                  onChange={ this.onChange.bind(this) } 
                                  onSearch={ this.onSearch.bind(this) }
                                  value={ this.state.query } />
                
                <ContextualMenu items={ this.state.suggestions } 
                                onItemClick={ this.onSuggestionClick.bind(this) } 
                                doNotLayer={ true } 
                                shouldFocusOnMount={ false }
                                focusZoneProps={{ disabled: true }} />
            </div>
        );
    }

As I said the shouldFocusOnMount fixed the first problem where focus was set when opening, but I still have an annoying focus when hovering the menu items.

Anyone could help me with this? You would save my day 👍

Thanks!

[spplante]

After all I decided to go ahead with using the onRender function to render the individual menu items by myself, that way there isn't any focus() behavior configured on the menu items and It's the only way I found to have 100% control on the items.