Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-29 01:28:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge pull request #749 from Stremio/fix/text-input-submit

Browse source 
fix(TextInput): submit not triggering
This commit is contained in:
Tim 2024-12-16 10:51:01 +01:00 committed by GitHub
commit eb7e1c39c4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 13 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/common/TextInput/TextInput.tsx
View file

@ -1,32 +1,25 @@
// Copyright (C) 2017-2024 Smart code 203358507
import React from 'react';
import React, { forwardRef, useCallback } from 'react';
import { type KeyboardEvent, type InputHTMLAttributes } from 'react';
import classnames from 'classnames';
import styles from './styles.less';
type Props = React.InputHTMLAttributes<HTMLInputElement> & {
type Props = InputHTMLAttributes<HTMLInputElement> & {
className?: string;
disabled?: boolean;
onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
onSubmit?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
onSubmit?: (event: KeyboardEvent<HTMLInputElement>) => void;
};
const TextInput = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
const { onSubmit, className, disabled, ...rest } = props;
const TextInput = forwardRef<HTMLInputElement, Props>((props, ref) => {
const onKeyDown = useCallback((event: KeyboardEvent<HTMLInputElement>) => {
props.onKeyDown && props.onKeyDown(event);
const onKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLInputElement>) => {
if (typeof props.onKeyDown === 'function') {
props.onKeyDown(event);
if (event.key === 'Enter' ) {
props.onSubmit && props.onSubmit(event);
}
if (
event.key === 'Enter' &&
!(event.nativeEvent as any).submitPrevented &&
typeof onSubmit === 'function'
) {
onSubmit(event);
}
}, [props.onKeyDown, onSubmit]);
}, [props.onKeyDown, props.onSubmit]);
return (
<input
@ -36,10 +29,10 @@ const TextInput = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
autoComplete={'off'}
spellCheck={false}
tabIndex={0}
{...props}
ref={ref}
className={classnames(className, styles['text-input'], { disabled })}
className={classnames(props.className, styles['text-input'], { 'disabled': props.disabled })}
onKeyDown={onKeyDown}
{...rest}
/>
);
});