Material-ui: TextField loses focus when on PopOver menu

[drFabio]

Problem description

Adding a textField inside popOver menu it's focus is lost when typing.

Link to minimal working code that reproduces the issue

import Popover from 'material-ui/Popover/Popover'
import { Menu, MenuItem } from 'material-ui/Menu'
import TextField from 'material-ui/TextField'

function MinimalExample() {
  return (
    <Popover
      open
      anchorEl={ANY_EL}
    >
      <Menu>
        <MenuItem primaryText="foundation" onTouchTap={this.props.onAZ} />
        <MenuItem>
          <div>
            <TextField
              onChange={(ev, newValue) => { ev.stopPropagation(); ev.preventDefault(); console.log('New Value', newValue)})}
            />
          </div>
        </MenuItem>
      </Menu>
    </Popover>
  )
}

Versions

• Material-UI: 0.17.4
• React: 15.5.4
• Browser: Chrome 57.0.2987.133

Description

The inputText while inside a popOver menu loses focus, probably due to a bubbling up of some keyBoard event.

Preventing default onKeyPress works to stop the missbehaviour but on that case it is lost the onChange event on textField

Images & references

An applied example is given bellow

[drFabio]

Not 100% sure but I think the problem is with the Menu onKeyDown handling.

I'm probably using the menu on a an unexpected way but having a way

[omarchehab98]

@drFabio try adding event.stopPropagation() on the events of TextField (onTouchTap, onKeyDown, ..., not sure which specifically).

You should use StackOverflow for these types of questions though, it is not a bug because you are using Menu in a way the developers did not intend.

Lovin' the design none the less! :clap:

[omarchehab98]

@drFabio also, why not add disabled to the MenuItem?

[drFabio]

Hello @omarchehab98 thanks for the feedback.
I thought about stackOverflow but I was on the opposite direction of your rationale. I had an inkling that I was most definetley bending the original design. Because of that I thought StackOverflow was not the right place because it was more of a design discussion and not "I broke something, can someone guide me to fix it".

About the disabled they are not an ideal solution because of the Menu event listening . My Idea was to have a TextField on the menu and the menu does the following onKeyDown:

  handleKeyDown = (event) => {
    const filteredChildren = this.getFilteredChildren(this.props.children);
    const key = keycode(event);
    switch (key) {
      case 'down':
        event.preventDefault();
        this.incrementKeyboardFocusIndex(event, filteredChildren);
        break;
      case 'esc':
        this.props.onEscKeyDown(event);
        break;
      case 'tab':
        event.preventDefault();
        if (event.shiftKey) {
          this.decrementKeyboardFocusIndex(event);
        } else {
          this.incrementKeyboardFocusIndex(event, filteredChildren);
        }
        break;
      case 'up':
        event.preventDefault();
        this.decrementKeyboardFocusIndex(event);
        break;
      default:
        if (key && key.length === 1) {
          const hotKeys = this.hotKeyHolder.append(key);
          if (this.setFocusIndexStartsWith(event, hotKeys)) {
            event.preventDefault();
          }
        }
    }
    this.props.onKeyDown(event);
  };

Also the stopPropagation would prevent the onChange of the textField.

Right now I don't think the menu is doing anything wrong and that this behavior is not a bug. I think that the developer should be able to disable the menu key listening and I could do a PR for that, but I'm aware that I'm bending the original design so currently I think that a feedback on the likes of " That might be useful" or "You are practically the only person in the world that ever needed that" would be nice.

[drFabio]

Tried to isolate what I wanted to formulate it better as a question but it seems more complex than I thought.
If I had my textField as a sibling of Menu and MenuItem the keyStrokes got messed up.

I'm closing this issue since I'm already trying to bend rules and couldn't Isolate it.

[JohnnyFun]

Fwiw, I ran into what sounds like a similar issue trying to get a search box in an icon button menu. If I put the contents of the menu into it's own react component and controlled the open state of the icon menu, all worked well since the react component would only render itself when changed.

Autofocus worked as expected, and the textfield doesn't lose focus when I type into it.

Partial Code:

<IconMenu
                iconButtonElement={<IconButton onClick={e => this.setState({open:true})} tooltip='Placeholders'><MoreVertIcon /></IconButton>}
                touchTapCloseDelay={0}
                open={this.state.open}
                onRequestChange={(e,val) => this.setState({open:false})}
            >
                {/* This is in a separate component so it is free to render without being affected by the menu. Else, the text box loses focus */}
                <PickerList onSearch={this.onSearch} search={search} datasource={datasource} onPick={this.onPick} /> 
            </IconMenu>

The picker list component is simply a div containing a textfield and menu items. The menu items use "onClick" to pass through their value.

I'm going to refine it a bit, but that's the basic concept. You lose some things like being able to select items with keyboard, but could maybe use the autocomplete with open on focus or something. Anywho, happy coding.