Clash Royale CLAN TAG#URR8PPP

Allow blur (focus on other items - input field outside paper-dialog) of Polymer paper-dialog

I have an absolutely positioned element which is out side paper-dialog, (it is a body > div).

I have a few input fields in the div where I want to be able to enter some text,

but paper-dialog doesn't let it leave focus, referencing to this link.

div

Here is the link to a codepen demonstrating the issue.

Try entering text in the input field (#my_div) before and after opening the paper-dialog with one of the buttons there

#my_div

Due to this, document.activeElement is always paper-dialog, hence I can't enter text in the input field outside it. (document.activeElement is logged in the console on clicking anywhere)

document.activeElement

paper-dialog

document.activeElement

So, when paper-dialog is open, I am not able to click/focus on the input elements in my div, is there a way around it ?

paper-dialog

div

P.S: I am mostly looking for a solution without changing the polymer code (like handling events or changing config via dom properties), assume I am running a local custom JS script over the main site.

3 Answers
3

Without changing the Polymer code try to catch the click on the input, and programmatically click on the open dialog button, like so:

<div id="my_div">
<input type="text" placeholder="Enter text" />
</div>
<script>
document.getElementById('my_div').onclick = function()
document.querySelectorAll('x-dialog paper-dialog:not([aria-hidden="true"]) paper-button')[0].click();
document.getElementById("my_div").firstElementChild.focus();

</script>


Check the codepen here and verify that its working as intended.

Looks like there is no way around it,
I ended up using a workaround of appending the textbox inside paper-dialog with fixed positioning to it, and then restoring it to normal dom position on close of dialog

We found a solution for our problem. Hopefully this can help you as well.

new paper.Tool();

let startDragPoint;

paper.tool.onMouseDown = (event) =>
document.getElementById('elementID').blur();
startDragPoint = event.point;
;


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.