grommet/grommet

Text area inside of a tab loses cursor focus when you type

Open

Aperta il 5 apr 2023

Vedi su GitHub
 (1 commento) (2 reazioni) (0 assegnatari)JavaScript (8247 star) (1015 fork)batch import
bughelp wanted

Descrizione

Expected Behavior

TextArea loses place when editing inside a tab gorup

Actual Behavior

If you edit the middle of a text area when a textArea is inside a teb frame, the cursor "jumps" to the end of the tab area - seems like there is some spontaneous reloading of the wrapper context going on

https://codesandbox.io/s/tabs-lose-context-dl66sm

Steps to Reproduce

  1. enter a block of text in the text area inside of the tabs
  2. put the cursor in the middle of the block
  3. continue to type

Guida contributor

Tech stack
reactjavascriptcss
Dominio
frontend
Tipo issue
bug
DifficoltàQuanto dovrebbe essere impegnativa per un nuovo contributor.
3
Tempo stimatoTempo stimato per completare e verificare uno scope piccolo.
half day
Stato attivitàQuanto è probabile che la issue sia ancora attiva e reviewable.
stale
ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.
mostly clear
Prerequisiti
React component lifecycleGrommet Tab component
Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.
35
Direzione di ricerca
Examine the provided Codesandbox to reproduce the issue. Look at the Tab component's implementation in grommet (https://github.com/grommet/grommet/tree/master/src/js/components/Tabs) and the TextArea component. Focus on how state is managed when switching tabs or typing. The cursor jump suggests a re render or unmount/remount of the TextArea. Check for missing keys or improper use of useEffect dependencies.