The text in the AsyncTypeahead textbox need to make white on the backspace. I have tried different methods by applying CSS, some method change, but that is not suitable. Can you anyone please suggest how to achieve this. Thanks in advance.
Below I have added the code used:
<AsyncTypeahead
className=""
id="typeahead"
delay={800}
emptyLabel="please select"
ignoreDiacritics={true}
minLength={3}
onSearch={this.onSearch}
placeholder="Insert text to search"
promptText={this.searchtext}
searchText={this.searchtext}
renderMenuItemChildren={(selectedItem: State, props) => {
}}
/>
Related
I don't know how to access the value of the input, I've searched all over https://mui.com/material-ui/react-text-field/ and haven't found an answer. Here is my TextField `
<TextField
id="outlined-search"
label="Поиск по названию"
variant="outlined"
onInput={console.log('Input FIRE')}
/>
onInput doesn't work yet.
I don’t remember what I tried, my ass is on fire.
Please check this event, it could be helpful
onInput={e => console.log('Input FIRE>>', e)}
you can try to check this one e.target.value or something different.
I believe the title is self-explanatory. I have checked the docs and some other threads, but I simply cannot manage to change both texts of the label: nor "Choose file", neither "No file chosen". Below is what I have tried so far. How could I change those texts?
{/* <label htmlFor="test" id="files">Test with classic label</label> */}
<Input
// addonAfter="test1"
// addonBefore="test2"
type="file"
onChange={handleFileSelected}
text="test"
/>
The text of the input's file element is controlled by the browser so you can not directly change that. What you can do is instead creating a customizable button that uses a ref to control the click on the input:
const ref = useRef<HTMLInputElement>(null);
<button onClick={() => ref.current?.click()}>Click Here</button>
<input
type='file'
ref={ref}
onChange={handleFileSelected}
style={{ display: "none" }} />
Ant Design also has Upload component for file uploading which could be styled easily
Imagine I have a button somewhere. When clicked, the text on it, now goes to my search bar. How do I make the window scroll to the search bar too after the value is set in the Input element shown below?
<Flex
flexDirection="column"
justifyContent="center"
alignItems="center"
maxWidth="90%"
mt={4}
>
{!filteredBlogPosts.length && 'No posts found.'}
{filteredBlogPosts.map((frontMatter) => (
<>
<BlogPost
key={frontMatter.title + frontMatter.lastPublishedOn}
handleSearch={(anyKey) => setSearchValue(anyKey)}
// Insert your code here, how to scroll after setting the key to search?
{...frontMatter}
/>
</>
))}
</Flex>
And, here is the <Input> field
<Input
aria-label="Search"
borderColor="blue.500"
onChange={(e) => setSearchValue(e.target.value)}
placeholder="Search"
value={searchValue}
//or should I do scroll here? How?
autoFocus
onFocus={e => e.currentTarget.select()}
/>
Is this something easy to do? Please present code examples if possible.
Thanks.
If anyone faces this issue in the future, I solved it using this simple function.
const scrollSearch = myKey => {
window.scrollTo(0, 0);
frontMatter.handleSearch(myKey)
};
And passed the scrollSearch function in button onClick.
I am trying to use the DateTimePicker component from react-widgets
Is it possible to disable keyboard input (and copy pasting) for the DateTimePicker input field and only constrain dropdown selection.
The disable API disables everything, including the dropdown selection menu. My intent is to constraint which values the user is allowed to select, and I can only do it from the dropdown menu.
Try this:
<DateTimePicker
inputProps={{
component: props => <input {...props} readOnly />
}}
/>
There's an active issue in react-widgets
repo to allow to set readOnly for just the input, which would accomplish this task more elegantly.
I solved it by handling onChangeRaw that listens for changes on the input and setting the current field value to empty string.
<DatePicker
value={this.state.startDate}
onChangeRaw={event =>
this.setState({startDate: ''})}
onChange={value =>
this.setState({startDate: value})}
/>
This is a little bizarre of a problem and I haven't been able to track down the issue. I have a checkbox / input combo I created using Semantic-UI React (Form.Checkbox). The checkbox portion is added to the input, think addon, for a little combo input situation. Desired behavior is when the checkbox is checked it allows the user to type input into the input portion of the combo input. The checkbox's state is managed in the component's local state.
If I just include this code:
<Form.Field className="field">
<label>{field.label}</label>
<Input
{...field.input}
label={{ basic: true, content: <Checkbox
onChange={() => this.setState({sendEmail: !this.state.sendEmail})}
checked={this.state.sendEmail} />,
style: {'borderRight': '0px'}
}}
disabled={!this.state.sendEmail}
labelPosition='left'
placeholder='Email Address'
/>
</Form.Field>
in the jsx (render function) for the component, the toggling actually happens, state is managed properly etc. But when I put the same code into a function to render back the same input like so:
renderCheckboxInputField(field){
return(
<div>
<Form.Field className="field">
<label>{field.label}</label>
<Input
{...field.input}
label={{ basic: true, content: <Checkbox
onChange={() => this.setState({sendEmail: !this.state.sendEmail})}
checked={this.state.sendEmail} />,
style: {'borderRight': '0px'}
}}
disabled={!this.state.sendEmail}
labelPosition='left'
placeholder='Email Address'
/>
</Form.Field>
</div>
);
}
and call it from here:
<Grid.Column>
<Field
name="email"
label="Send Email"
component={this.renderCheckboxInputField}
/>
</Grid.Column>
the checkbox doesn't actually visually toggle, though the state is being updated properly. You might ask why not just keep it in the first location where it already works, but a) for reusability I placed it within the function, and b) I wanted to include it this way inside of the <Field /> component at the bottom because I am using Redux Form for validation on the input portion of the checkbox / input combo I made.
So for some clarification the <Field /> component comes from Redux Form. The <Form.Field /> pertains to a Semantic-UI React component. And all of the hacky stuff inside of the <Input /> component's label field is me just customizing the input to look as I desire.
You are calling this.renderCheckboxInputField without any params, but in function definition you pass 'field' and using it inside