jerosoler / Drawflow

Simple flow library 🖥️🖱️
https://jerosoler.github.io/Drawflow/
MIT License
4.42k stars 714 forks source link

Modal text input is broken #798

Open domccorm opened 6 months ago

domccorm commented 6 months ago

ISSUE:

Within the demo/example page, the DBClick! card/nav-item can be added to the canvas but when you double-click the area and the modal popup shows up, you can't add any text. This is the item (see pic below):

image

RECREATE STEPS:

1) Visit https://jerosoler.github.io/Drawflow/ 2) On left hand-nav drag and drop the "DBClick!" item on the left hand side and drop it onto the canvas 3) Double-click on the white portion that says "Db Click here" (here's a picture) image

4) A modal popup shows up. It should say "Change your variable {name}!" -- see picture below image

5) Try to click your mouse cursor onto the input text field -- you can't click into it or type into it even though it looks like the text bar icon (not your mouse pointer) shows up...Its's interesting that the "X" button works to close the modal though 6) THE ISSUEL: you can't type into the text input -- I want to type into that box

FIX

I can't find one. I've tried a bunch of stuff but I'm stumped. I think it must either be some event listener as the issue or the strange z-indexing I'm seeing (I think some JS sets it to either a value of 2 or 9999 depending on what you engage with, Any help would be greatly appreciated

jerosoler commented 6 months ago

Demo is the simple example only.

Change input in html to:

<input type="text" df-name="" onclick="event.target.focus();">
domccorm commented 6 months ago

This is perfect!!! Thank you so much -- I love it. I'm opting to use this since its probably "easier" or more appealing visually to hide/stuff a bunch of parameters within this popup instead of having a large block with inputs/parameters. Thanks so much for showing me this fix --- I really appreciate it!

AlcaponexD commented 4 months ago

Hello, for inputs worked fines with .focus() but select nop <select onclick="event.target.focus();" df-${name}_option class="select-cond-false"> Just mark an border selected, but not open the options