moroshko/react-autosuggest

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

Open

#315 geöffnet am 19. Jan. 2017

Auf GitHub ansehen
 (2 Kommentare) (0 Reaktionen) (0 zugewiesene Personen)JavaScript (5.936 Stars) (637 Forks)batch import
help wanted

Beschreibung

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
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
2
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
under 1 hour
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
stale
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
clear
Voraussetzungen
ReactCSSreact autosuggest API
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
70
Research-Richtung
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.