jerosoler / Drawflow

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

When input type = "password" the node can't be drag from list #853

Open rayrayraykk opened 2 months ago

rayrayraykk commented 2 months ago


How can I fix this conflict?

jerosoler commented 2 months ago

I don't understand, can you elaborate more on your problem.

What does drag from list mean?

rayrayraykk commented 2 months ago

I don't understand, can you elaborate more on your problem.

What does drag from list mean?

Thanks for your quick reply!

For example in you demo, I change input type text to password, I can't drag any of node unless I type something in other input box:

case 'github':
                var githubtemplate = `
          <div>
            <div class="title-box"><i class="fab fa-github "></i> Github Stars</div>
            <div class="box">
              <p>Enter repository url</p>
            <input type="password" df-name>
            </div>
          </div>
          `;
                editor.addNode('github', 0, 1, pos_x, pos_y, 'github', {"name": ''}, githubtemplate);
                break;
jerosoler commented 2 months ago

uhmmm it's very curious.

I think it's a browser limitation or some strange case. If you click on another editable textarea type field, the behavior works again.

I see some similar problem: https://github.com/react-dnd/react-dnd/issues/3603 https://github.com/react-dnd/react-dnd/issues/1596

With Firefox it doesn't seem to happen.

As a solution: By losing focus of an input type password you could detect the event and click on another hidden textarea.

Or make it a text field when you click and then hide. Or put on some kind of mask...

If I have time I will investigate further.

rayrayraykk commented 2 months ago

Thanks again! If you have any updates about this thread, please let me know :)