Print Page - CheckBox with tabIndex inconsistencies

test code, using the stock material theme if that matters:

Code:

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

function App() {
	const [model, setModel] = useState({
		myBox:"some text"
	});

	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 name="myCheck" label="Check me:" labelPosition="after">
					<CheckBox tabIndex={2} checked={model.myCheck} />
				</FormField>
			</Form>
		</div>
	);
}

export default App;

without tabIndex, the checkbox gets focus but there is no indication that it has focus. pressing space bar does toggle the checkbox as expected.

with tabIndex, the checkbox gets a little highlight when it has focus, but pressing spacebar does nothing.

if it can get the highlight AND space bar toggle no matter if tabIndex is set that would be perfect.

EasyUI Forum

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