Why the autofocus isn't working in ReactJS with antd? - javascript

I'm having trouble with the autoFocus, I searched a lot, but none solutions that I found worked for me, I'm using a Drawer with a form inside, that form has some Form.Item with Input, and when I open the drawer, I want to focus on form.item, anybody can help me?
Here is my code:
<Drawer>
<Form layout="vertical" ref={this.formRef} onFinish={this.onFinish} onFinishFailed={this.onFinishFailed}>
<Row gutter={16}>
<Col span={24}>
<Form.Item
name="description"
label="Description"
rules={[
{
required: true,
message: 'Please enter a description.',
},
]}
>
<Input.TextArea autoFocus rows={10} placeholder="Please enter a description." />
</Form.Item>
</Col>
</Row>
<Row style={{ bottom: '0', position: 'absolute', right: '38px' }}>
<Form.Item>
<Button
onClick={this.onClose}
style={{ marginRight: 8 }}
>
Cancel
</Button>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Row>
</Form>
</Drawer>

According to the docs, autoFocus is not supported prop (like it is on <input /> element). Haven't used this ui lib before, so can't say if setting focus manually by using ref would work.
UPDATE:
Just have played a bit and it looks like that focus can be set manually:
demo
code
Another update:
demo with drawer
code

const inputTagRef = useRef(null);
useEffect(() => {
if (inputTagRef.current) {
inputTagRef.current.focus();
}
}, [inputTagRef.current]);
<Input
ref={inputTagRef}
/>
This will add autoFocus to you input field using antd ui lib.

Related

Antd switch not triggering onValuesChange when toggling?

I have a basic form:
<Form
layout="vertical"
form={form}
onFinish={onSubmit}
onValuesChange={onValueChanges}
>
<Form.Item
label="Foo"
name="requirePassword"
valuePropName="checked"
>
<Switch />
{requirePasswordSettingDirty && (
<span className={styles.requirePasswordWarning}>
Required password
</span>
)}
</Form.Item>
</Form>
When I click the switch, it doesn't trigger the callback onValueChanges. What am I missing?
Data binding is tied to a Form.Item with name key and wraps only an Input. Therefore if you have additional elements alongside the Input, such as a custom label element, you'll have to nest Form.Items.
<Form.Item label="Foo" valuePropName="checked">
<Form.Item name="requirePassword">
<Switch />
</Form.Item>
{requirePasswordSettingDirty && <span>Required password</span>}
</Form.Item>

React input value doesnt work with states

I have weird error. When i try change my input value with a state its not working but if i write my state some void place so its start changing value. Why its being like that ? My codes :
<Form
className="mt-4"
layout="vertical"
requiredMark="hidden"
name="basic"
form={form}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
>
<Form.Item
name="Name"
label="Başlık"
style={{ width: 400 }}
rules={[{ required: true, message: "Lütfen Başlık Giriniz!" }]}
>
<Input
id="IDTitle"
placeholder="Başlık"
onChange={handleInputChange}
/>
</Form.Item>
<Form.Item name="Url" label="URL" style={{ width: 400 }}>
{titleData} // if i write it its working. But if i delete that row its not shows or update value.
<Input placeholder="Url" disabled value={titleData}></Input>
</Form.Item>
<Button
type="primary"
className="submitButton float-right"
htmlType="submit"
>
Submit
</Button>
</Form.Item>
</Form>
const handleInputChange = (e) => {
const data = e.target.value;
console.log(data);
setTitleData(toEnglishChar(data));
};
How can i solve it ? Thanks for all replies! I dont know why its happening like that but i tried everything i can do. I tried change antd input with default input too but it didnt work too. Thanks for all replies !!
Change onChange event like the following:
<Input
id="IDTitle"
placeholder="Başlık"
onChange={e => handleInputChange(e)}
/>

form.validateFields() doesnt work when we have custom antd form component

Considering the following example, this is stopping us to create custom components inside forms using antd4 version.
const handleFormSubmit = () => {
form
.validateFields()
.then((values: any) => {
console.log('success values => ', JSON.stringify(values));
successCallback(values);
})
.catch((errorInfo: any) => {
console.log('failureCallback values => ', JSON.stringify(errorInfo));
failureCallback(errorInfo);
});
};
<Form
form={form}
layout="vertical"
name="normal_login"
className="login-form"
initialValues={store.formData.initialValues}
>
<Form.Item>
<Input placeholder="Name" />
</Form.Item>
<Button type="primary" htmlType="submit" onClick={handleFormSubmit}>
Create
</Button>
</Form>
This works absolutely fine, whereas if the component is custom, then it doesn't work. Example:
function CustomInput(props){
return (
<Form.Item>
<Input placeholder={props.name} />
</Form.Item>
)
}
<Form
form={form}
layout="vertical"
name="normal_login"
className="login-form"
initialValues={store.formData.initialValues}
>
<CustomInput name="Name" />
Will display the field and also validates on change event. HandleFormSubmit is called, but it's not triggering success or failure block.
<Button type="primary" htmlType="submit" onClick={handleFormSubmit}>
Create
</Button>
</Form>
What's wrong here?
Try this instead of your Custom JSX
function CustomInput(props){
return (
<Form.Item name={props.name}> # Update this line only and remove this comment #
<Input placeholder={props.name} />
</Form.Item>
)
}
<Form
form={form}
layout="vertical"
name="normal_login"
className="login-form"
initialValues={store.formData.initialValues}
>
<CustomInput name="Name" />
<Button type="primary" htmlType="submit" onClick={handleFormSubmit}>
Create
</Button>
</Form>
NOTE: In Antd if your using Form.Item then you have to set name there
not on input fields. Form.Item assign its value to its Input.
I hope your doubt is solved comment for more views. I also tired of antd and wasted many days to understand this.

validation keeps working from deleted rows in a dynamic form in Antd

I'm following the docs of Antd and tried to use this piece of code from here antd dynamic form item:
import { Form, Input, Button, Space } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '#ant-design/icons';
const Demo = () => {
const onFinish = values => {
console.log('Received values of form:', values);
};
return (
<Form name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off">
<Form.List name="users">
{(fields, { add, remove }) => (
<>
{fields.map(field => (
<Space key={field.key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
<Form.Item
{...field}
name={[field.name, 'first']}
fieldKey={[field.fieldKey, 'first']}
rules={[{ required: true, message: 'Missing first name' }]}
>
<Input placeholder="First Name" />
</Form.Item>
<Form.Item
{...field}
name={[field.name, 'last']}
fieldKey={[field.fieldKey, 'last']}
rules={[{ required: true, message: 'Missing last name' }]}
>
<Input placeholder="Last Name" />
</Form.Item>
<MinusCircleOutlined onClick={() => remove(field.name)} />
</Space>
))}
<Form.Item>
<Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
Add field
</Button>
</Form.Item>
</>
)}
</Form.List>
<Form.Item>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
);
};
But I have this error, when I add some rows, then delete some of them and finally submit, the validator keeps working even after I had deleted those rows.
Here is a demo that replicates my error.
https://codesandbox.io/s/quizzical-ride-m1pe6?file=/src/App.js
This is a bug from antd.
An issue was opened about that on their github.
https://github.com/ant-design/ant-design/issues/27576
And the associate PR :
https://github.com/react-component/field-form/pull/213
A fix has been merged last week. Normally, the next release will include the fix.

Is there any possibility to open a dialog when clicking on a textField in MaterialUI?

I want to make a textField clickable so that a dialog box opens for the user to type in more text.
Do you have any idea how can I make that happen with the help of MaterialUI?
This is my current solution, where a button is displayed to open the dialogbox (instead of making the textField itself clickable):
<form noValidate autoComplete="off">
<TextFieldDialog />
<TextField
id="outlined-multiline-static"
label="Frage"
multiline
rows={4}
placeholder="Tippe hier die Frage ein!"
onChange={this.handleChange.bind(this)}
variant="outlined"
style={{
backgroundColor: "white",
}}
>
</form>
You could implement onClick on TextField
const [dialogOpen, setDialogOpen] = useState(false)
return (
<div>
<TextField
id="outlined-basic"
label="Outlined"
variant="outlined"
onClick={() => setDialogOpen(true)}
/>
<Dialog open={dialogOpen} onClose={() => setDialogOpen(false)}>
<DialogTitle>Sample Dialog</DialogTitle>
<DialogContent dividers>
<Typography>Your content here</Typography>
</DialogContent>
</Dialog>
</div>
)
Codesandbox demo

Categories

Resources