I am trying to implement a free text filter view with MUI. The Autocomplete component already has that view implemented (when the 'multiple' attribute is set). But I don't want to choose values from a predefined list of options. I want to be able to enter free text sentences.
Any idea on how to implement that?
Thanks #RyanCogswell for this suggestion.
Attached are a link to the solution and the code below:
import * as React from "react";
import Autocomplete from "#mui/material/Autocomplete";
import TextField from "#mui/material/TextField";
export default function KeywordFilter() {
return (
<Autocomplete
multiple
freeSolo
id="keyword-filter"
options={[]}
getOptionLabel={(option) => option}
renderInput={(params) => (
<TextField
{...params}
variant="standard"
label="Filter Keywords"
/>
)}
/>
);
}
We have a ReactJs web application and we are taking some data through of input field but the problem is sometimes this field fills data automatically
For more specification, this problem happens when we are using Oppo and Redmi(OS) but for other OS it's working as normal
For more clear understanding, we made a video using Redmi mobile phone, and here is the video link, Please have a look at the video from the link.
https://drive.google.com/file/d/1yo03CjqeV9iFXgtSH-ff7zgH1hJq60BY/view?usp=sharing
Here is the input field code
// Formik Field
<Field name={name}>
{({ field }: any) => {
return (
<input
{...rest}
{...field}
id={name}
type="text"
autoComplete="off" // we use before off= boolean
value={values.data}
placeholder="Input data"
className={`appoint-input-box ${errors && touched ? " error-red-400" : null}`}
onChange={async (event) => {
handleFiend(event);
setFieldValue("data", event.value.toLowerCase());
}}
/>
);
}}
</Field>
As we said before, this is a ReactJs web app but for form handling we use Formik and this is a text-type input field also this form is a child form, it has a parent form as a controller.
Now we have autoComplete="off" but before we use boolean and top label form we also use the same.
We are hoping, that the provided information is describing properly the exact issue.
If someone expert can guide us on what to do then it's will really pleasure
Thanks
Internazionaleauto
I have a React app and I want to generate a word document using a partially template using the information a user fills in the input form. So for example:
There is a template word document:
My name is {firstname} and i live at {address}.
The form is something like
<View>
<TextInput
value={this.state.firstname}
placeholder={'firstname'}
/>
<TextInput
value={this.state.address}
placeholder={'Address'}
/>
</View>
I understand redocx can be used to generate something like this but can redocx be used on template/partially documents that already have words on them and require only user inputs in the app to be completed and then generated. Is there a way this can be achieved using react native.
I've come across quite a few packages and APIs for opening a stream and capturing images, but all of these solutions entail loading the feed in a component, so the 'camera' is an in-browser utility. Is there a way to open the phone's actual camera app outside the DOM?
Short answer:
<input type="file" accept="image/*" capture="environment">
Modern phone browsers can opt to use the camera app as input for <input type="file"> input, in lieu of a file-selection dialog, when you use the property accept="image/*". This will allow users to select their preferred input, but if you use the property capture on the input element, the browser sees a hint to automatically use the camera without giving a choice at all. capture can have a value as well, to hint which camera should be used:
Adding the capture attribute without a value let's the browser decide which camera to use, while the "user" and "environment" values tell the browser to prefer the front and rear cameras, respectively.
The capture attribute works on Android and iOS, but is ignored on desktop. Be aware, however, that on Android this means that the user will no longer have the option of choosing an existing picture. The system camera app will be started directly, instead.
Once you have an input image, you can read it as you would any input file, e.g., with FileReader.
Thanks to #apsillers for the answer. Here's a React-specific implementation for those who are trying to create a button that prompts actual camera load for photo-taking and not a video feed capture in-browser:
The button:
<div >
<label>
<input
style={{display: 'none'}}
type='file'
accept="image/*"
capture="environment"
onChange={this.handleImageChange}
/>
<YourCustomButton/>
</label>
</div>
Handler:
handleImageChange = (event) => {
this.setState({
image: URL.createObjectURL(event.target.files[0])
})
}
Thank you #apsillers and #struensee for the answers, I managed to do what I was looking for with both answers. However, there was something missing on #struensee answer, and I would like to contribute with my React solution:
import React, { useState, useRef } from "react";
const UploadImageComponent = () => {
const [imageObject, setImageObject] = useState(null);
const handleFileInput = useRef(null);
const handleClick = () => {
handleFileInput.current.click();
};
const handleImageChange = (event) => {
setImageObject({
imagePreview: URL.createObjectURL(event.target.files[0]),
imageFile: event.target.files[0],
});
};
return (
<div>
<button onClick={handleClick}>Upload Photo</button>
<label>
<input
style={{ display: "none" }}
type="file"
accept="image/*"
capture="environment"
ref={handleFileInput}
onChange={handleImageChange}
/>
</label>
{imageObject && <img src={imageObject.imagePreview} />}
</div>
);
};
export default UploadImageComponent;
The use of ref will ensure clicking on the button will trigger the onChange in the hidden input. The <img> tag is there to display the image currently being uploaded.
I am currently working on edit functionality using react form and want the data in the form fields to be pre-populated with the props value and for that I have assigned it to defaultValue in the form fields.
But the problem I came across while doing this is my defaultValues flush out on page reload. I tried finding a solution for it and came across few hacks to make the dom in sync with defaultValue. One of which was assigning a key to the wrapper component of the input field.
What is the reason for this behaviour of defaultValue?
Could anyone please help me figure out why the form field behaves like that? Here's the related snippet:
var title = this.props.post.title;
return (
<form
onSubmit={
postId ? this.handleUpdate.bind(this) :
this.handleSubmit.bind(this)
}
>
<h3>
{postId ? "Edit post" : "Create a New Post"}
</h3>
<FormGroup key={title} controlId="formControlsText">
<ControlLabel>Title</ControlLabel>
<FormControl
type="text"
inputRef={ref => {
this.title = ref;
}}
placeholder="Enter title"
defaultValue={title}
/>
</FormGroup>
</form>
)