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 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.
Post a Comment for "Showing Html In The Browser But Not The Textbox"