I want to display image with name in react-dropdown-select package. I acheive using below code, but the problem is searchable not working.
I want display image with name and id, need to search name also
This is my multi react-dropdown-select package code
<Select isClearable={false}
placeholder={"Select Mates"}
styles={this.customStyles}
menuPortalTarget={document.querySelector('body')}
value={this.state.selectedOption}
onChange={this.handleChange}
selectedValue={true}
hideSelectedOptions={false}
options={Dropdownlist.map(e => ({
label: <span><img src={e.image} /> {e.name} </span>, value: e.id}))}
isMulti
theme={theme => ({
...theme,
colors: {
...theme.colors,
neutral50: 'white',
},
})}
/>
Any one help me to solve my problem
thanks in advance
Related
While building a user interface with a few inputs, I decided to migrate the base input components to form a single component I can use, while that's not really the problem. Here's the code for it. For easy and memorable use for Inputs.
import {
FormControl,
FormErrorMessage,
FormHelperText,
FormLabel,
Input,
} from "#chakra-ui/react";
const DefaultInput = ({
isInvalid,
label,
helperText,
errorMessage,
...otherProps
}) => {
return (
<FormControl isInvalid={isInvalid}>
{label && <FormLabel>{label}</FormLabel>}
<Input
variant="outline"
padding="25px 10px"
margin="10px 0px"
border={"0px"}
{...(isInvalid && { border: "0px" })}
{...otherProps}
/>
{!isInvalid ? (
<FormHelperText>{helperText}</FormHelperText>
) : (
<FormErrorMessage>{errorMessage}</FormErrorMessage>
)}
</FormControl>
);
};
export default DefaultInput;
Used it like this but it doesn't seem to take notice of the "max" property.
<DefaultInput
value={custom.credits}
isInvalid={creditsError}
helperText={"Minimum of 50 Credits."}
errorMessage={"Please enter a valid number above 50."}
maxW={isNotSmallerScreen ? "50%" : "70%"}
fontSize={!isNotSmallerScreen ? "12px" : "16px"}
onChange={handleCustomCredit}
type="number"
placeholder="Enter Credits"
name="credits"
max="5000"
/>
I've also tried manually declaring the "max" and "type" within the component I created but still nothing.
.....
<Input
variant="outline"
padding="25px 10px"
margin="10px 0px"
border={"0px"}
max="5000"
type="number"
{...(isInvalid && { border: "0px" })}
{...otherProps}
/>
.....
This is actually a browser quirk and not related to Chakra. max HTML5 attribute won't actually restrict you from typing larger numbers until you submit the containing form. If you want to limit it on the fly you have to build out your own function.
Unless you aren't seeing anything on submit either? See this example of what you should see https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_max_min.
I have the following Control written for ReactJs app. The app and the code is not written by me, but I have to modify it. However, I am new to ReactJs.
function FormSelectNative({ name, label = null, defaultValue = '', options, valueKey = 'value', labelKey = 'label', ...props }) {
return (
<FormControl variant="outlined" size="small" fullWidth>
<InputLabel id={name}>
{label || name}
</InputLabel>
<Select
name={name}
labelId={name}
label={label || name}
defaultValue={defaultValue}
{...props}
>
{options.map(option =>
<MenuItem key={option[valueKey]} value={option[valueKey]}>{option[labelKey]}</MenuItem>
)}
</Select>
</FormControl>
);
}
I need to pass defaultValue parameter correctly.
I am trying to set it like this:
<FormSelectNative
options={games}
valueKey="id"
labelKey="name"
onChange={handleGameSelect}
defaultValue={games[0]}
/>
But it doesn't work (default value is not set). I need to set default value to be first element of "games". However, here I believe is some mismatch of types, so it is not set.
Games element example:
{id: 1, name: "Name of Game", description: "Some test description", helper: "test.png", created_at: "2021-08-24T16:06:13", ... some other properties}
The defaultValue has to be one of the possible value that you pass to the MenuItem. Each of those values is the game.id of each game, not the game object as a whole (a number, not an object). That's because you are doing value={option[valueKey]} where valueKey is id.
Therefore this is what you should do instead to set the default value correctly:
<FormSelectNative
options={games}
valueKey="id"
labelKey="name"
onChange={handleGameSelect}
defaultValue={games[0].id} // <<<--- get the id of the first item
/>
I have a multi-stage form implemented in react and it works fine with text fields. However, recently I have had to add a switch control in the form but it does not remember the selection when I change stages. Is there a special way to implement switch in react with formik?
Here is part of my code:
const onChangeCompany = () => {
diff_company === false ? setDiff_company(true) : setDiff_company(false);
};
...
<Col md={{ span: 3, offset: 1 }}>
<Form.Check
type="switch"
label="Different Company"
name="company"
onChange={onChangeCompany}
/>
</Col>
...
mapPropsToValues: () => ({
owner: "",
diff_company: false,
Company: "",
location: "",
...
So formik has a unique way of implementing checkboxes still working on switch .. but the following code works.
<label>
<Field
type="checkbox"
name="company"
label="Different Company"
/>
{' '}Different Company
</label>
I however cannot figure out how to implement an onchange listener!
I have created a select component using react-select. I need to append a badge to the option who's available value is false. I have achieved it using -
const formatOptionLabel = ({ code, name, available }) => (
<div className="ds-select-distibutor-step-container format-option" style={{ display: "flex", cursor:"none" }}>
<div>{name}</div>
{!available ?
<div className="format-label" style={{ borderRadius: "12px" ,marginLeft: "auto", color: "#fff" , backgroundColor: "#aaa", padding: "2px 10px", fontSize:"12px"}}>
<span>Coming Soon</span>
</div>
: ''}
</div>
);
Following json comes at run time, which I map and use as options-
const options= [
{code:"abc",name:"abc",rank:0,available:true},
{code:"xyz",name:"xyz",rank:0,available:false},
{code:"pqr",name:"pqr",rank:0,available:true}]
And following is my custom select component
<Field
id="selectedDistributor"
name="selectedDistributor"
component={customSelect}
options={sortBy(options, 'name').map(({ code, name, available}) => ({ code, name, available }))}
formatOptionLabel={formatOptionLabel}
className="select-step"
placeholder="abc"
touched={false}
defaultValue="abc"
requiredField
>
</Field>
<FieldWrapper
label={label}
requiredField={requiredField}
touched={touched}
forId={inputId}
>
<Select
{...input}
id={inputId}
disabled={isEditMode || disabled}
onChange={value => input.onChange(value.code)}
formatOptionLabel={formatOptionLabel}
options={options}
placeholder={placeholder}
value={input.code}
className={`input-components-select ${className}`}
>
</Select>
</FieldWrapper>
enter code here
Everything is almost working but when I select the option, the background of all the options turns into blue, I tried making changes and found that if I pass the 'value' as a key of JSON instead of 'name' in the option this error goes away. But I can't use it since the json is coming from the backend and its dynamic.
Could anybody please suggest what should be done so that the background doesn't change? I have attached images for reference
first time
after selecting
I faced the same problem and I found that you need to declare a function getOptionValue as the Select's props. In your example, it should be like this
<Select
{...input}
id={inputId}
disabled={isEditMode || disabled}
onChange={value => input.onChange(value.code)}
formatOptionLabel={formatOptionLabel}
options={options}
placeholder={placeholder}
value={input.code}
getOptionValue={(option) => option.code} // changes here!!!
className={`input-components-select ${className}`}
>
</Select>
This function is used for comparison to highlight the currently selected option in the list. You can check more details in the discussion here
https://github.com/JedWatson/react-select/issues/3388
I have a question about rendering errors when using Formik#1.5.7 to create forms in React.
I am trying to figure out how to properly render different styles for my input based on whether or not the input has been touched and has errors.
{({ values, error, touched }) => (
<Form>
<Field name="Lawn" type="text">
{({ field, form }) => (
<Input
style={form.touched.Lawn && form.errors.Lawn ?
{ style } : { styleError }}
{...field}
type="text"
placeholder="Lawn Details"
/>
)}
</Field>
const style = {
margin: '1em 0em',
fontSize: '1.5em',
backgroundColor: 'white',
};
const styleError = {
margin: '1em 10em',
fontSize: '1.5em',
};
I believe my error has to do with not properly accessing the touched and error states in the form.
Any help would be very appreciated.
You're close, you just incorrectly passed style and styleError. They should not be surrounded with braces (and they're also backwards because the error formatting will show when there is no error and vice versa).
<Input
style={form.touched.Lawn && form.errors.Lawn ? styleError : style}
{...field}
type="text"
placeholder="Lawn Details"
/>
Here's a full example.