Mobile devices don't recognize 'Enter' key

Viewed 35

I'm developing a project in TypeScript and on the computer it works normally. The problem is in mobile devices that do not recognize the 'Enter' key and simply do not call any function.

application link: https://felipe-cll.github.io/lista-react-ts/

import * as C from './styles';
import { useState, KeyboardEvent } from 'react';
import { IoMdAddCircle } from 'react-icons/io';

type Props = {
    onEnter: (taskName: string) => void
};

export const AddArea = ({ onEnter }: Props) => {
    const [inputText, setInputText] = useState('');

    const handleKeyUp = (e: KeyboardEvent) => {
        if(e.code === 'Enter' && inputText !== '') {
            onEnter(inputText);
            setInputText('');
        }
    }

    return (
        <C.Container>
            <div className='image'><IoMdAddCircle fontSize={26} /></div>
            <input 
                type="text" 
                placeholder='Adicione uma tarefa' 
                value={inputText} 
                onChange={e=>setInputText(e.target.value)}
                onKeyUp={handleKeyUp}
            />
        </C.Container>
    );
};

At first I thought I just needed to add the 'NumpadEnter'

const handleKeyUp = (e: KeyboardEvent) => {
        if((e.code === 'Enter' || e.code === 'NumpadEnter') && inputText !== '') {
            onEnter(inputText);
            setInputText('');
        }
    }

But the problem continued and I don't know what's going on

0 Answers
Related