Я сталкиваюсь с непоследовательным поведением события с компонентом FileTrigger из @React-aria/Components в приложении React. Проблема наблюдается специально в Chrome на iOS ( версии 140 ), основанная на пользовательской аналитике, и его трудно воспроизвести.
Описание проблемы
После того, как пользователь выбирает файл изображения:
Первый выбор: на одном из них. /> Второй и последующие выборы: Открывается диалоговое окно файла, но сразу после выбора файла событие Cancel запускается. Выбранные файлы не обрабатываются, которые не запускали событие Onselect .
среда
[*] React: 18.x
Библиотека: @reaact-aria (1.2.1) . /> < /li>
Browser & Platform: Chrome 140, iOS (iPhone /iPad)
Пример упрощенного кода
Вот упрощенная версия компонента, фокусирующейся на обработке событий: < /p>
< /li>
< /ul>
import React, { useEffect, useRef } from 'react';
import { FileTrigger } from 'react-aria-components';
const UploadComponent = ({ onFileSelected }) => {
const uploadInputRef = useRef(null);
// This handler does not fired at all
const handleFileSelect = (fileList) => {
console.log('onSelect fired', fileList);
if (fileList) {
onFileSelected(Array.from(fileList));
}
};
// This event fires immediately on subsequent selections
const handleCancel = () => {
console.log('Cancel event fired from user selection');
};
useEffect(() => {
const currentInput = uploadInputRef.current;
// this code will run after second upload
currentInput?.addEventListener('cancel', handleCancel);
return () => {
currentInput?.removeEventListener('cancel', handleCancel);
};
}, []);
return (
Подробнее здесь: https://stackoverflow.com/questions/797 ... chrome-ios