moroshko/react-autosuggest

react-autosuggest problems as 'in-place' editor in a react-bootstrap-table

Open

#315 opened on Jan 19, 2017

View on GitHub
 (2 comments) (0 reactions) (0 assignees)JavaScript (5,936 stars) (637 forks)batch import
help wanted

Description

I'm trying to use react-autosuggest as an 'in-place' editor to edit cell values in a 'react-bootstrap-table' but having trouble to get it to work as expected. Clicking in the cell, the autosuggest input appears in the cell showing the placeholder text. When starting to type, the suggest list seems to appear with the 'filtered-down' content, but is clipped at the cell border, apparently. I created a pen to illustrate the behaviour:

http://codepen.io/neophob/pen/bggVBQ

Is there a possibility to get this working and the 'drop-down' to appear above the table-contents?

Thanks & greetings, Bernd Rode

Contributor guide

Tech stack
javascriptreactcss
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
under 1 hour
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
ReactCSSreact autosuggest API
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
Investigate the CSS clipping issue. Check the codepen example provided in the issue to reproduce. Look at the react autosuggest component's suggestions container styling. Consider overriding the z index or using the `theme` prop to set a higher z index on the suggestions list. Alternatively, check if the library supports rendering suggestions in a portal to avoid clipping within the table cell. Review existing comments for potential solutions mentioned by maintainers.