Print Page - tabIndex and focus on LinkButton

tabindex seems to be ignored on linkbutton, the order skips it and them comes back to it after all the tabIndex specified controls are tabbed through.

there is also no focus indication on the buttons.

Code:

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

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

	function handleClick() {
		setModel({times: model.times+1, myBox:"clicked " + (model.times+1)})
	}

	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={handleClick} tabIndex={2}>tab to here and press enter</LinkButton>
				</FormField>
				<FormField name="myBox2" label="Box2:">
					<TextBox value={model.myBox2} tabIndex={3} />
				</FormField>
			</Form>
		</div>
	);
}

export default App;

EasyUI Forum

General Category => EasyUI for React => Topic started by: chrwei on April 08, 2020, 01:29:34 PM