Переключение фокуса при нажатии в Svelte Component

Я сделал компонент для ввода финансовых чисел, который будет использоваться в моих формах ввода. Теперь он отлично работает, за исключением одного странного поведения: когда я нажимаю на поле ввода, оно получает фокус, как и ожидалось, однако при нажатии на него, когда он уже находится в фокусе, фокус снимается.

В компоненте есть только один обработчик on: click, и когда я его удалил, поведение не изменилось. Итак, я не знаю, что вызывает эту странность.

<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>

Вот REPL, который показывает проблему.

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


svelte svelte-component
person BenVida    schedule 11.11.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Это происходит потому, что div.focused:before {...} CSS создает псевдоэлемент перед входом. Вы можете добавить pointer-events: none, чтобы этого не происходило - пример здесь.

(Благодарим njb в нашем чате Discord за выяснение этого - у нас есть канал поддержки, который вы также добро пожаловать к нам с такими вопросами!)

person Rich Harris    schedule 12.11.2018
comment
Ух ты! Я бы никогда не догадался об этом! Большое спасибо за njbotkin и вам за решение. Я добавил дополнительное правило CSS, и оно отлично работает. Кстати, Svelte супер классный !! Спасибо за его создание! Я нашел его недавно, и он делает создание приложений намного проще и быстрее! Я буду чаще пользоваться чатом в будущем. - person BenVida; 12.11.2018