Вывод компонента по нажатию на слово в TextField?

Question

[sedulka]

Добрый день! Проблема такая, есть задача выводить компонент(выпадающий список) по нажатию на слово в поле Input. В поле вводиться будет предложение, а затем пользователь нажимает на определенное слово в нем и должен открываться выпадающий список.

Для стилей использую библиотеку Material UI.

Код компонента выглядит так:

function Content(props) {
    const { classes } = props;

    return (
        <Paper className={classes.paper}>
            <AppBar className={classes.searchBar} position="static" color="default" elevation={0}>
                <Toolbar>
                    <Grid container spacing={16} alignItems="center">
                        <Grid item xs>
                            <TextField
                                fullWidth
                                placeholder="Введите фразу которую нужно обучить"
                                InputProps={{
                                    disableUnderline: true,
                                    className: classes.searchInput,
                                }}
                            />
                        </Grid>
                        <Grid item>
                            <Button variant="contained" color="primary"  className={classes.addUser}>
                                Обучить
                            </Button>
                            <Tooltip title="Сбросить">
                                <IconButton>
                                    <RefreshIcon className={classes.block} color="inherit" />
                                </IconButton>
                            </Tooltip>
                        </Grid>
                    </Grid>
                </Toolbar>
            </AppBar>
            <div className={classes.contentWrapper}>
                <Typography color="textSecondary" align="center">
                    Пока ничего не было обучено
                </Typography>
            </div>
        </Paper>
    );
}

Comments

[Антон Спирин]

Думаю, тут лучше подойдет решение основанное на <div contenteditable="true">