Как эмулировать клик по элементу после того, как он отрендерился?

Question

[Евгений Вольф]

Доброго времени суток уважаемые!

Подскажите пожалуйста, как правильно "вызвать" click() на элементе после того как он отрендерился?

Суть проблемы, и мои попытки её решения:

methods: {
    clickFunction() { //Функция которая "эмулирует" событие "click"
        document.querySelector('#myInput').click(); //Вот так - всё работает, проблема только в том, что в этот момент времени элемент ещё не успел отрендерится, по этому "кликать некуда"

        //Порывшись в документации VueJS нашел вот такое "решение":
        this.$nextTick(function() {
            document.querySelector('#myInput').click(); //Не работает
        }

        //Нашел некий "костыль" призванный исправить сие
        setTimeout(function () {
            document.querySelector('#myInput').click(); //Но... он тоже не работает
        }, 0); //И если добавить времени, например 500 или 1000мс - он тоже не работает
    }
}

Можно как-то с этим бороться, и если можно, то как?

P.S. Я в целом понимаю, откуда у проблемы "растут ноги" и имею общее понимание на тему "почему оно именно так"... Я не понимаю, как это правильно решить и можно ли это решить вообще, правильно. Я думаю, задача довольно банальная, "подождать пока элемент отрендерится и что-то с ним сделать".

Элемент - представленный в примере - это FileInput (кликать нужно на него, что бы вызвать диалог выбора файлов), варианты уровня "заменить его на что-то ещё" или "заранее создать миллион инпутов и потом их использовать" и т.п. варианты - отпадают сразу.

Через this.$refs тоже пробовал, эффект аналогичный (не работает).

UPD. Алтернативный вариант, для простоты понимания:

methods: {
    async clickFunction() {
        await this.$nextTick();
        document.querySelector('#myInput').click(); //Так работать не будет, но если бы функция не была асинхронной - всё бы работало исправно
    }
}

Comments

[Сергей delphinpro]

А если сделать этот файл-инпут отдельным компонентом, рендерить его как компонент, и в его собственном mounted попробовать имитировать клик?

Само собой, этот клик должен быть инициирован пользователем, например кликом по другому элементу, который добавляет новый файл-инпут.

Не уверен в решении, просто мысли вслух.

[Евгений Вольф]

Сергей delphinpro, такой вариант кажется должен отработать, я тоже об этом подумал и об этом писали где-то ещё, но, я ещё не успел его проверить. Придумал другой вариант "обхода" данной ситуации. Но если сработает - работать будет всё равно "на половину", т.е. это возможно решит проблему путём "самоклика после сразу рендеринга", но не решит проблему если нам всё-таки нужно будет кликнуть по элементу не сразу после его ренденринга, а через какое-то время, но не раньше чем он отрендерился. В любом случае, спасибо Вам за участие. На досуге, если не забуду - обязательно проверю этот вариант.

Answer 1

[Филипп Гапоненко]

Вы можете попробовать использовать хук жизненного цикла компонента mounted.
Для генерации события нужно использовать метод dispatchEvent в который передавать событие нужного типа созданное с помощью конструктора.
Пример

Comments

[Евгений Вольф]

Мне кажется, либо Вы не понимаете меня, либо я Вас... Сам по себе вот этот код: document.querySelector('#myInput').click(); работает отлично, т.е. событие отрабатывает как и предполагалось. Проблема в том, что все <input type="file"/> рендерит сам VueJS, "реактивно". и если вызвать click() сразу - то элемент не успеет отрендерится, а если вызывать его внутри $nextTick - в виду того, что он выполняется вне "основного контекста" или "главного потока" (не знаю, как это правильно называется, иными словами, "из-за того, что $nextTick вызывается асинхронно) - попытка не приводит ни к чему.

[vism]

Евгений Вольф, Не понимаете вы я считаю)

[vism]

Евгений Вольф, подсказка: что такое ваш click() и есть ли он у элемента когда он отрендерился

[Евгений Вольф]

vism, click() - это событие. Проблема в том, что элемент рендерится не при загрузке страницы, он рендерится в результате какого-то другого события, например, другого клика, т.е. рендерится он "реактивно", в примере этого нет. А второй момент заключается в том, что функция показанная в примере - не использует $nextTick и/или не является асинхронной, при этом $nextTick - "официальное решение проблемы" (из документации VueJS) доступа к элементу после того как он отрендерится, которое не позволяет с этим элементом потом работать (в т.ч. кликать по нему).

[vism]

Евгений Вольф,
1. click() не событие, а функция.
2. рендеринг в результате события какой-то функцией - это НЕ реактивность. но это и не важно
3. $nextTick - да решение проблемы, когда вы правильно(в нужном месте и нужное время) им пользуетесь, как описано в документации. Вы серьезно считаете, что добавив некст тик, он у вас словит условный рендеринг спустя десятки минут?

И так с чего вы взяли, что оно у вас должно работать?
С чего вы взяли, что мы экстрасенсы и не полное описание в вопросе предоставили?

[Евгений Вольф]

1. click() не событие, а функция.

Пусть так, сути дела относительно вопроса это не меняет.

Вы серьезно считаете, что добавив некст тик, он у вас словит условный рендеринг спустя десятки минут?

Нет, я кажется не говорил ни о каких десятках минут. Я говорил о том, что click() технически работает за пределами $nextTick'а и за пределами асинхронных функций, но не работает внутри них, при этом если от $nextTick'а отказаться - click() отработает по элементу, которого ещё не существует в DOM дереве и эффекта это желаемого не даст.

Answer 2

[0xD34F]

Элемент - представленный в примере - это FileInput (кликать нужно на него, что бы вызвать диалог выбора файлов)

Нет, ничего у вас не получится. Этот диалог может быть открыт только в результате настоящих действий пользователя (и то не всех: клик, нажатие клавиши - окей; скролл, движение мыши, вызов контекстного меню - нет), а не их имитации. По крайней мере, в Хроме. В Фаерфоксе имитировать можно.

Comments

[Евгений Вольф]

В хроме такой "клик" отлично отрабатывает. Вопрос не в самом клике как таковом, вопрос в том, что он не хочет работать внутри асинхронной функции и об этом уже писали некоторые авторы... Они не писали только одного - как с этим бороться.

[0xD34F]

Евгений Вольф,

В хроме такой "клик" отлично отрабатывает.

Если его поместить в обработчик другого клика - да. А вам надо, насколько я понял, чтобы он как бы сам собой происходил, без участия пользователя - так не будет.