Focus toggling on click in Svelte Component

Viewed 1580

I made a component for entering financial numbers, to be used in my input forms. It works really great now, except for one odd behavior: When I click on the input field it gets the focus as expected, however when clicking on it when it already has the focus takes away the focus.

There's only one on:click handler in the component and when I removed it the behavior didn't change. So, I don't know what's causing this oddity.

<p>Input with precision=2 <Money id=first bind:value=a precision=2/>
    <br/>Value={a}</p>
<hr/>
<p>Input with no precision specified <Money ref:m2 bind:value=b/><br/>
    Value={b}</p>


<script>

    export default {
        data(){return {
            a:1234.34,
            b:3.14159265
        }},

        components: {
            Money : "./Money.html"
        }
  }
</script>

<style>
    /* How to sytle the component*/
    :global(#first) {
        font-family:serif;
        lobal(#first) {
        font-family:serif;
        background:#ff9;
    }
</style>

Here's the REPL that shows the issue.

https://svelte.technology/repl?version=2.15.3&gist=27f91d57e7a9267fe7d7d36aad850c7e

1 Answers

This is happening because the div.focused:before {...} CSS is creating a pseudo-element in front of the input. You can add pointer-events: none to prevent that from happening — example here.

(Credit to njb in our Discord chatroom for figuring that one out — we have a support channel which you're also very welcome to drop by with questions like these!)

Related