Showing Html In The Browser But Not The Textbox

update1: updated image for better understanding I am trying to implement chip filters similar to googleflights. Right now when you select sports it will show sports1 it will repla

Solution 1:

You are using Menu which works a little differently than what you are trying to achieve. Actually looking into how Google Flights is using these filters, it seems like they are using Chips and Dialog components to produce that result. Once you use a Dialog component, you can define the content yourself.

I have created a sandbox here

I converted your code to take Dialog instead of Menu.

<div>
        <Chip
          style={{ display: this.state.display ? "" : "none" }}
          label={this.state.chipName}
          onDelete={this.handleDelete}
          className={this.props.classes.chip}
          color="primary"
        />

        <Button
          style={{ display: this.state.display ? "none" : "" }}
          aria-owns={anchorEl ? "simple-menu" : undefined}
          aria-haspopup="true"
          onClick={this.handleClick}
        >
          {this.props.buttonName}
        </Button>

        <Dialog
          onClose={this.handleClose}
          aria-labelledby="simple-dialog-title"open={this.state.openDialog}
        >
          <DialogTitle id="simple-dialog-title" style={titleStyle}>
            Set backup account
          </DialogTitle>
          <div>
            <input type="text" placeHolder="type here" />
            <List>{menuItems}</List>
          </div>
        </Dialog>
      </div>

menuItems returns ListItem instead of MenuItems. Find the full code in the sandbox.

The input you are trying to get should be before the List. You can handle that any way you want.

I haven't overridden the CSS properties for Dialog. So, once you override the backdrop background color and position of the dialog, you should achieve the display as well.