ComboBox Focus issue

[chrwei]

When using editable={false} with a combobox, when a list item is selected focus is taken away from the combobox and not given back.  ideally, the list would not take focus away as it's all the same component.

[jarry]

The ComboBox will get the focus again after selecting an item from the list. Please try to update to the newest version.

[chrwei]

is it possible to not trigger the onFocus event when the panel closes?

[chrwei]

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;
}

[jarry]

This issue has been fixed. Please update to the newest version.

[chrwei]

onFocus is still firing multiple times for one click