Print Page - ComboBox Focus issue

After more testing this has additional issues.

click the drop down arrow for one box, then click the drop down arrow for the other box, now use your keyboard up and down arrow keys and the first box is what is active.

Code:

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

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

	const [model, setModel] = useState({
		Box1:0,
		Box2:2
	});

	return (
		<div className="App">
			<Form 
				errorType="tooltip" 
				model={model}
				labelWidth={120}
				labelAlign="right"
			>
				<FormField name="Box1" label="Box 1:" style={{float:"left"}}>
					<ComboBox value={model.Box1} tabIndex={1} editable={false}
						data={[
							{ value: 0, text: "Item 0" },
							{ value: 1, text: "Item 1" },
							{ value: 2, text: "Item 2" },
						]}
					/>
				</FormField>
				<FormField name="Box2" label="Box 2:" style={{float:"left"}}>
					<ComboBox value={model.Box2} tabIndex={2} editable={false}
						data={[
							{ value: 0, text: "Item 0" },
							{ value: 1, text: "Item 1" },
							{ value: 2, text: "Item 2" },
						]}
					/>
				</FormField>
			</Form>
		</div>
	);
}

export default App;

add this to your App.css and it'll highlight (literally) the issue

Code:

.form-field-focused {
  box-shadow: 0px 0px 3px 2px #eae885;
  background-color: #eae885;
}

EasyUI Forum

General Category => EasyUI for React => Topic started by: chrwei on April 23, 2020, 01:26:05 PM