Comments (5)
frankvp11
commented on July 19, 2024
1
To help us all, I've figured out what @tjongsma wanted (in brief)
from nicegui import ui
@ui.page("/")
def main():
flag = False
def handle_event(e):
nonlocal flag
if flag:
editor.set_value("")
flag = not flag
else:
editor.set_value(None)
flag = not flag
editor.update()
def print_dict():
print(editor._to_dict()['props'])
editor = ui.editor().on('keypress.enter', handle_event)
ui.button('Print dict', on_click=print_dict)
ui.run()We should look into seeing if there might be a better way to handle the setting of None for the editor. Perhaps we should into some core functionality of the ValueElement and how it handles None. The reason that I say this is because despite the fact that this fix that I gave above does technically work, it doens't solve the underlying issue which is that the props aren't properly being cleared. Despite this fix somehow working, after typing some text, then clearing it from the editor, when I run the print_dict() function by the button press, it still shows the editor as having the old value in the model-value. This is something that should be fixed.
from nicegui.
frankvp11
commented on July 19, 2024
This is quite an interesting problem.
Something deeper is going on than just the editor....
from nicegui import ui
def handle_event1():
editor.set_value(None)
print(editor._props)
def handle_event2():
print(editor._props)
editor = ui.editor().on("keypress.enter", lambda: handle_event1())
ui.button("Clear", on_click=handle_event2)
ui.run()When I run something like this, I can see that the props aren't actually being updated...
When I type something, then press enter, then press the button, it shows me that the model-value is still set to the text I typed.
This is the reason that when you press enter on the second time it doesn't remove it, or atleast that's what I'm thinking.
I think solving this issue will come down to figuring out why the props aren't actually updated
from nicegui.
tjongsma
commented on July 19, 2024
Thanks for looking into this!As a temporary fix for anyone coming across this, I sort of solved the issue with a bit of a bandaid. My intuition was that the issue was that it only worked once because somehow setting the value would only work if it was a new value and something wasn't being updated right (which I think you're also finding). So what worked for me was some simple logic:
flag=0Def clear_editor():Global flagIf flag==0: Editor.set_value(none) Flag=1Else: Editor.set_value('') Flag=0
Sorry for the formatting, I'm on my phone right now. But this seems to work, at least visually.
from nicegui.
frankvp11
commented on July 19, 2024
I think I've figured out the bug, and I don't believe that it's Nicegui's fault.
I would appreciate if someone could verify this somehow, but basically, here is what I think.
TLDR; race condition.
Basically, when you press the enter key, it sends two events. One get's senter to the editor element which thinks that you want to place content on the newline. The other get's picked up by us setting the content to None. The content first get's set to None, then the event get's registered from the element itself and it tries to set the content to the previous, with the newline.
This causes a race condition in some sense because it has to do with the timing.
This is what happens when I print out the contents of the message here
{'id': 4, 'client_id': 'a48113b2-a22d-427d-8bbf-601e4e0500fe', 'listener_id': '650d15a8-6afe-43bf-bfc5-72aa7bdb6627', 'args': 'a'}
{'id': 4, 'client_id': 'a48113b2-a22d-427d-8bbf-601e4e0500fe', 'listener_id': '72ed4040-9518-4a02-b7f1-b13400fca0a5', 'args': {'isTrusted': True, '_vts': 1720035544085, 'key': 'Enter', 'code': 'Enter', 'location': 0, 'ctrlKey': False, 'shiftKey': False, 'altKey': False, 'metaKey': False, 'repeat': False, 'isComposing': False, 'charCode': 13, 'keyCode': 13, 'DOM_KEY_LOCATION_STANDARD': 0, 'DOM_KEY_LOCATION_LEFT': 1, 'DOM_KEY_LOCATION_RIGHT': 2, 'DOM_KEY_LOCATION_NUMPAD': 3, 'detail': 0, 'sourceCapabilities': {}, 'which': 13, 'type': 'keypress', 'eventPhase': 2, 'bubbles': True, 'cancelable': True, 'defaultPrevented': False, 'composed': True, 'timeStamp': 2796.5999999940395, 'returnValue': True, 'cancelBubble': False, 'NONE': 0, 'CAPTURING_PHASE': 1, 'AT_TARGET': 2, 'BUBBLING_PHASE': 3}}
{'id': 4, 'client_id': 'a48113b2-a22d-427d-8bbf-601e4e0500fe', 'listener_id': '72ed4040-9518-4a02-b7f1-b13400fca0a5', 'args': {'isTrusted': True, '_vts': 1720035544085, 'key': 'Enter', 'code': 'Enter', 'location': 0, 'ctrlKey': False, 'shiftKey': False, 'altKey': False, 'metaKey': False, 'repeat': False, 'isComposing': False, 'charCode': 13, 'keyCode': 13, 'DOM_KEY_LOCATION_STANDARD': 0, 'DOM_KEY_LOCATION_LEFT': 1, 'DOM_KEY_LOCATION_RIGHT': 2, 'DOM_KEY_LOCATION_NUMPAD': 3, 'detail': 0, 'sourceCapabilities': {}, 'which': 13, 'type': 'keypress', 'eventPhase': 3, 'bubbles': True, 'cancelable': True, 'defaultPrevented': False, 'composed': True, 'timeStamp': 2796.5999999940395, 'returnValue': True, 'cancelBubble': False, 'NONE': 0, 'CAPTURING_PHASE': 1, 'AT_TARGET': 2, 'BUBBLING_PHASE': 3}}
{'id': 4, 'client_id': 'a48113b2-a22d-427d-8bbf-601e4e0500fe', 'listener_id': '650d15a8-6afe-43bf-bfc5-72aa7bdb6627', 'args': 'a<div><br></div>'}Note that the previous code block is the result of me pressing the letter 'a' once, then enter.
So how do we fix this?
Ultimately, I have no idea. We need to change the way that event handlers are ordered, and I'm not sure of how it's currently being done.
from nicegui.
Related Issues (20)
- Frameless Window Options Break When Compiled into EXE with ui.page HOT 1
- On the expectations of refreshable + user storage HOT 1
- nicegui-pack issure on windows: No module named 'typing_extensions' HOT 1
- ui.image will never load local image in single page app example HOT 6
- Using chatai, enter the question carriage return did not respond HOT 2
- Client has been deleted but is still being used. This is most likely a bug in your application code HOT 4
- Dark mode switch `ui.expansion()` color to white HOT 1
- ui.download N times when you open N tabs HOT 3
- Nice GUI table elements with buttons don't stick when organizing table HOT 2
- When calling props('color=None') (or white), class text-white is added HOT 3
- `app.shutdown` does not work with `ui.run_with` HOT 2
- What is wrong with on_value_change? HOT 4
- Javascript libraries not discovered in 1.4.27 HOT 2
- RuntimeError: app.storage.user needs a storage_secret passed in ui.run() HOT 8
- on air not working from UK HOT 2
- Make `client.ip` available before socket connection is established
- Input unable to add forward slash (/) when it is bind to path HOT 2
- on_upload doesn't seem to be working HOT 10
- Connection lost within 3 seconds when app is deployed on kubernetes HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from nicegui.