Can't access custom MenuItem html

[duhmojo]

I'm trying to implement a custom input file with button menu item. A custom way to update the menu options. The existing allowNew is a nice feature, but I need buttons to make it clear the item is being saved, not just added to the selection. Plus I have a use case where a select is needed as well. I won't justify why this can't be done outside of the menu list. It will just work better if it is.

I add an option with the input and button, and it renders ok. The MenuItem is set to disabled because if I didn't it would do all the row highlighting and clicking it would add it to the options (the input field and button would become a token/tag).

However setting MenuItem to disabled makes the inner html input and button unclickable. When I right click inspect the button it's the parent rbt-menu dropdown-menu div that's onto, blocking access.

I noticed when I click on a disabled menu item, the upper rbt-input div updates its class with "focus". There's an event on the div wrapping the renderMenu items which focus' the typeahead input at the top. This kind of defeats the purpose of disabling a menu item because if it's disabled, the component shouldn't focus on the typeahead, you can't click it.

This being said, setting disabled on an option item doesn't do anything I can observe. I assumed it would make a MenuItem unclickable and not highlight it. It does that, but the parent renderMenu wrapper doesn't.

See my general sample below to give you an idea, but all you need to do is create a basic typeahead with a disabled menu item that contains an input. You won't be able to access the input when opening the menu.

Version: 6.2.3

Steps to reproduce

   options.push({
            label: (
                <div>
                    <input
                    type="text"
                    placeholder="Add new option..."
                    onChange={handleInputChange}
                    />
                    <button onClick={handleAddOption}>Add</button>
                </div>
            ),
            value: false,
            disabled: true, // Disable selection of this item
          })
    }
    if (props.options !== undefined && props.options.length > 0) {
        options = [
            ...options,
            ...props.options
        ]
    }

...

        <Typeahead
            ref={ref}
            id={'mutableTypeahead'}
            labelKey="label"
            value={selectValue}
            multiple={true}
            clearButton
            selected={selectedValueOptions}
            options={options}
            renderMenu={(results, menuProps, state) => {
                return (
                    <Menu {...menuProps}>{options.map((o, idx) => {
                        return (
                            <MenuItem key={idx} option={o} position={idx} disabled={o.disabled}>
                               {o.label}
                            </MenuItem>
                        )
                    })}</Menu>
                )
            }}
        />

Expected Behavior

I want to access disabled MenuItem html elements.

Actual Behavior

I can't access disabled MenuItem html elements.

[duhmojo]

I tried using useItem prop but this passes through the logic for handling regular string menu options, while the renderMenu prop just hands everything over.

[duhmojo]

Going back to my example I added filterBy to skip the item with inputs. The mouse cursor will now look correct when mousing over, however, clicking the input is still prevented by the focus to the typeahead area. e.g. click the input, focus' in the typeahead at the top.

[duhmojo]

After filterBy and experimenting with e.stopPropigation(), I have the button working in a menu item. However no matter what I do with the input, it always focuses on the typeahead input.

If there was way to implement/replace the typeahead onFocus myself?

[duhmojo]

I set the input onClick event to skip bubbling up. Focuses on the Typeahead still when clicking. If I still an alert in there, the alert pops, then after clicking it focuses on the Typeahead. Ugh...

<input
  type="text"
  onClick={(e) => { e.stopPropagation(); e.preventDefault; }}
/>