Print Page - Messager alert() not taking focus

in this example, click in the text box, then press tab to focus the button, then press enter to activate the button onClick. you get the alert box, but now just press enter and watch the value in the text box increase

the LinkButton focus remains and accepts the keystrokes, even though the dialog appears modal and the button can't be clicked.

Code:

import React, { useRef, useState } from 'react';
import './App.css';
import { Form, FormField, LinkButton, Messager, TextBox } from 'rc-easyui';

function App() {
	const messager = useRef();

	const [model, setModel] = useState({
		myBox:0
	});

	function onClick() {
		setModel({
			myBox: parseInt(model.myBox)+1
		})
		messager.current.alert({
			title: "Clicked",
			msg: "now press enter"
		});
	}

	return (
		<div className="App">
			<Form 
				errorType="tooltip" 
				model={model}
				labelWidth={120}
				labelAlign="right"
			>
				<FormField name="myBox" label="Box:">
					<TextBox value={model.myBox} tabIndex={1} />
				</FormField>
				<FormField >
					<LinkButton onClick={onClick} >Tab to here and press enter</LinkButton>
				</FormField>
			</Form>
			<Messager ref={messager}></Messager>
		</div>
	);
}

export default App;

EasyUI Forum

General Category => EasyUI for React => Topic started by: chrwei on April 22, 2020, 03:07:01 PM