chrwei
|
|
« on: March 03, 2020, 10:51:56 AM » |
|
I've got a functional component wrapped around a formfield+tooltip+combobox like so: 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.
|
|
|
Logged
|
|
|
|
jarry
|
|
« Reply #1 on: March 03, 2020, 08:03:40 PM » |
|
You should use the 'current' to access the component object. <ComboBox ref={cboBox} {...rest} style={cboStyle} panelStyle={{ height: 'auto', maxHeight: "200px" }} onFocus={() => { if (!rest.editable) { console.log("cboBox", cboBox) cboBox.current.openPanel() } }} />
|
|
|
Logged
|
|
|
|
chrwei
|
|
« Reply #2 on: March 09, 2020, 12:36:00 PM » |
|
however, "console.log("cboBox", cboBox)" outputs "cboBox {current: null}" so that still doesn't work.
|
|
|
Logged
|
|
|
|
chrwei
|
|
« Reply #3 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 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 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?
|
|
|
Logged
|
|
|
|
jarry
|
|
« Reply #4 on: March 11, 2020, 11:56:18 PM » |
|
Please look at this code. It works well. 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;
|
|
|
Logged
|
|
|
|
chrwei
|
|
« Reply #5 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.
|
|
|
Logged
|
|
|
|
chrwei
|
|
« Reply #6 on: March 27, 2020, 07:04:59 AM » |
|
add errorType="tooltip" to the Form and the refs will stop working.
|
|
|
Logged
|
|
|
|
chrwei
|
|
« Reply #7 on: March 31, 2020, 12:27:42 PM » |
|
this affects textbox too <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.
|
|
|
Logged
|
|
|
|
jarry
|
|
« Reply #8 on: April 01, 2020, 08:15:34 PM » |
|
Please show a simple example to demonstrate your issue.
|
|
|
Logged
|
|
|
|
chrwei
|
|
« Reply #9 on: April 02, 2020, 09:05:12 AM » |
|
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.
|
|
|
Logged
|
|
|
|
jarry
|
|
« Reply #10 on: April 02, 2020, 11:30:01 PM » |
|
This issue has been fixed. Please update to the latest version.
|
|
|
Logged
|
|
|
|
chrwei
|
|
« Reply #11 on: April 03, 2020, 08:13:06 AM » |
|
perfect, thanks!
|
|
|
Logged
|
|
|
|
|