EasyUI Forum

General Category => EasyUI for React => Topic started by: chrwei on March 03, 2020, 10:51:56 AM


Title: ComboBox ref not working?
Post by: chrwei on March 03, 2020, 10:51:56 AM
I've got a functional component wrapped around a formfield+tooltip+combobox like so:

Code:
export const ComboField = ({ label, name, hidden, invisible, tooltip, labelWidth, style, cboStyle, ...rest }) => {
	const cboBox = useRef(null);

	if (!style) style = {};
	if (hidden === true) {
		style["display"] = "none";
	}
	if (invisible === true) {
		style["visibility"] = "hidden";
	}

	return (
		<FormField name={name} label={label} labelWidth={labelWidth || "unset"} style={{ ...{ marginBottom: "5px", marginRight: "10px" }, ...style }}>
			<Tooltip position="left" content={tooltip}><i className={tooltip ? "fas fa-question-circle" : ""} style={{ fontSize: "14px" }} /></Tooltip>
			<ComboBox ref={cboBox} {...rest} style={cboStyle} panelStyle={{ height: 'auto', maxHeight: "200px" }} 
				onFocus={() => {
					if(!rest.editable) {
						console.log("cboBox", cboBox)
						cboBox.openPanel()
					}
				} }
			/>
		</FormField>
	);
}

I'm trying to make it so when you tab into any non-editable combobox that it auto opens the panel. 

my console log is "cboBox {current: null}".  what should I be doing different?

the main reason I want to do this is because there's no focus indication on the box when the form validation has an error state, and the only keyboard input that show any response are the up and down arrow. the standard html select will select an item when its first letter is pressed.  it would be great if this behavior could be added as users are familiar with it.

Title: Re: ComboBox ref not working?
Post by: jarry on March 03, 2020, 08:03:40 PM
You should use the 'current' to access the component object.
Code:
<ComboBox ref={cboBox} {...rest} style={cboStyle} panelStyle={{ height: 'auto', maxHeight: "200px" }}
  onFocus={() => {
    if (!rest.editable) {
      console.log("cboBox", cboBox)
      cboBox.current.openPanel()
    }
  }}
/>

Title: Re: ComboBox ref not working?
Post by: chrwei on March 09, 2020, 12:36:00 PM
however, "console.log("cboBox", cboBox)" outputs "cboBox {current: null}" so that still doesn't work.

Title: Re: ComboBox ref not working?
Post by: chrwei on March 11, 2020, 03:00:50 PM
well, I'm at a loss.  I pulled my component out to a test app and it's not null, and does drop.  in my app it's still null and not working.  I'm using the component exactly as it is in my app, copy/pasted.

the only difference is something I see in the chrome react-devtools, in the one that works the component inspector shows like

Code:
ComboField
 . t
  . Context.Consumer
     t
   . t key=".0"
   . t key=".1"
.0 is my tooltip  and .1 is the dropdown

in the one that doesn't work it's like
Code:
ComboField
 . t
  . Context.Consumer
     t
   . t key=".0"
    . t key="k1"
   . t key=".1"
    . t key="k1"

the k1 items are my tooltop and drop down.

I've tried reproducing my system with just a combo field and I cannot get the k1's to show up there.  the only thing I haven't put in is the ApolloProvider, that really shouldn't affect this, should it?

Title: Re: ComboBox ref not working?
Post by: jarry on March 11, 2020, 11:56:18 PM
Please look at this code. It works well.
Code:
import React, { useRef } from 'react';
import { Form, FormField, TextBox, ComboBox, Tooltip } from 'rc-easyui';

export const ComboField = ({ label, name, hidden, invisible, tooltip, labelWidth, style, cboStyle, ...rest }) => {
  const cboBox = useRef(null);

  if (!style) style = {};
  if (hidden === true) {
    style["display"] = "none";
  }
  if (invisible === true) {
    style["visibility"] = "hidden";
  }

  return (
    <FormField name={name} label={label} labelWidth={labelWidth || "unset"} style={{ ...{ marginBottom: "5px", marginRight: "10px" }, ...style }}>
      <Tooltip position="left" content={tooltip}><i className={tooltip ? "fas fa-question-circle" : ""} style={{ fontSize: "14px" }} /></Tooltip>
      <ComboBox ref={cboBox} {...rest} style={cboStyle} panelStyle={{ height: 'auto', maxHeight: "200px" }}
        onFocus={() => {
          if (!rest.editable) {
            console.log("cboBox", cboBox)
            cboBox.current.openPanel()
          }
        }}
      />
    </FormField>
  );
}
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      user: {
        name: null,
        hero: null
      },
      heroes: [
        { value: 11, text: "Mr. Nice" },
        { value: 12, text: "Narco" },
        { value: 13, text: "Bombasto" },
        { value: 14, text: "Celeritas" },
        { value: 15, text: "Magneta" },
        { value: 16, text: "RubberMan" },
        { value: 17, text: "Dynama" },
        { value: 18, text: "Dr IQ" },
        { value: 19, text: "Magma" },
        { value: 20, text: "Tornado" }
      ]
    }
  }
  render() {
    const { user, heroes } = this.state;
    return (
      <div>
        <h2>Basic Form</h2>
        <Form
          style={{ maxWidth: 500 }}
          model={user}
          labelWidth={120}
          labelAlign="right"
        >
          <FormField name="name" label="Name:">
            <TextBox></TextBox>
          </FormField>
          <ComboField label="Select a hero:" name="hero" labelWidth={120} data={heroes}></ComboField>
        </Form>
      </div>
    );
  }
}

export default App;

Title: Re: ComboBox ref not working?
Post by: chrwei on March 12, 2020, 06:03:49 AM
that does work for me, and mine works when I pull it out as a minimal example.

it's not working when combined with all my other crap.

where does the k1 come from?  it's not from my code.  that's the only difference I can see.

Title: Re: ComboBox ref not working?
Post by: chrwei on March 27, 2020, 07:04:59 AM
add errorType="tooltip" to the Form and the refs will stop working.

Title: Re: ComboBox ref not working?
Post by: chrwei on March 31, 2020, 12:27:42 PM
this affects textbox too

Code:
<Form errorType="tooltip">
    <FormField name="myBox" label="Box">
        <TextBox ref={ref => {
            console.log("TextBox", name, ref)
            refBox.current = ref
        } } />
    </FormField>
</Form>

it doesn't even console.log, at all.

Title: Re: ComboBox ref not working?
Post by: jarry on April 01, 2020, 08:15:34 PM
Please show a simple example to demonstrate your issue.

Title: Re: ComboBox ref not working?
Post by: chrwei on April 02, 2020, 09:05:12 AM
Code:
import React, { useRef, useState } from 'react';
import './App.css';
import { Form, FormField, TextBox } from 'rc-easyui';

function App() {
	const refBox = useRef(null);
	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 ref={ref => {
						console.log("TextBox", ref)
						refBox.current = ref
					}}  value={model.myBox} />
				</FormField>
			</Form>
		</div>
	);
}

export default App;

the "TextBox" console log never appears.  remove 'errorType="tooltip" 'and it appears.  this affect combobox too, and likely all comments based on InputBase under a form.

Title: Re: ComboBox ref not working?
Post by: jarry on April 02, 2020, 11:30:01 PM
This issue has been fixed. Please update to the latest version.

Title: Re: ComboBox ref not working?
Post by: chrwei on April 03, 2020, 08:13:06 AM
perfect, thanks!


Powered by SMF 1.1.18 | SMF © 2013, Simple Machines