reflex
reflex copied to clipboard
reflex-dev
The cursor always show in wrong place when every time we typing in TextArea .
Describe the bug A clear and concise description of what the bug is. This is a sample code from stack overflow. And the problem we meet is that Textarea cannot for us to type.
Setting the value and on_change looks like the only way to support the typing and the setting value by function. And the cursor is just put in the wrong place... So we cannot support type well...
"""Welcome to Pynecone! This file outlines the steps to create a basic app."""
from pcconfig import config
import pynecone as pc
class State(pc.State):
q1_response: str
q1_c0: bool = False
q1_c1: bool = False
q1_c2: bool = False
def add_response(self, *args):
text = ''
if self.q1_c0:
text += q.options[0][1] + '\n'
if self.q1_c1:
text += q.options[1][1] + '\n'
if self.q1_c2:
text += q.options[2][1] + '\n'
self.q1_response = text.strip()
def test_get_value(self):
return "GDD"
def the_key_down(self,*args):
print("the_key_down")
self.q1_response = self.q1_response + "A"
class Question:
def __init__(self):
self.q = 'This is the question'
self.options = [
('None', 'Nothing'),
('Answer 1', 'The long answer 1.'),
('Answer 2', 'The long answer 2.'),
]
q = Question()
def index():
return pc.container(
pc.text(q.q, font_size="1.5em"),
pc.vstack(
pc.checkbox(q.options[0][0] + ' - ' + q.options[0][1], on_change=State.set_q1_c0),
pc.checkbox(q.options[1][0] + ' - ' + q.options[1][1], on_change=State.set_q1_c1),
pc.checkbox(q.options[2][0] + ' - ' + q.options[2][1], on_change=State.set_q1_c2),
pc.button("Add", on_click=State.add_response, bg="blue", color="white"),
pc.text_area(
value = State.q1_response,
placeholder = 'The long answer will go here',
on_change = State.set_q1_response,
rows = 8,
),
),
)
app = pc.App(state=State)
app.add_page(index)
app.compile()
To Reproduce Steps to reproduce the behavior:
- Code/Link to Repo:
Expected behavior A clear and concise description of what you expected to happen.
Screenshots If applicable, add screenshots to help explain your problem.
** Specifics (please complete the following information):**
- Python Version: 3.11
- Pynecone Version: 0.1.31
- OS: Mac
- Browser (Optional): chrome
Additional context Add any other context about the problem here.
Chakra-UI cannot get the information of the cursor position in textarea. (Ref https://chakra-ui.com/docs/components/textarea/props)
But the original JS+HTML textarea can support it. The following code demonstrates that. (Ref http://jsfiddle.net/gilly3/6SUN8/)
Related: https://github.com/facebook/react/issues/955
i think the issue here is that setState is being called outside of the onChange handler (from react's perspective). a couple of solutions come to mind, but the easiest appears to be using some kind of client-side debounce (even with zero debounce, just having the intermediary between the reflex state and the client state seems to do the trick)
