My Code
<Creatable
name="productType"=
options = {this.state.productOptions}
value = {this.state.productType}
onNewOptionClick = {this.createProductType}
onChange = {this.handleProductChange}
/>
createProductType(option) {
var options = this.state.productOptions;
var label = option.label.charAt(0).toUpperCase() + option.label.slice(1);
options.push({
label: label,
value: option.value
})
this.setState({
productOptions: options,
productType: option.value
})
}
Before I click new option:
After I click new option:
Desired UI state after clicking new option:
Did not whether to post this as issues on Github as I am not sure of the exact way of using onNewOptionClick.
I was able to solve this by adding a ref
ref={input => this.productSelect = input }
and then calling it so
this.productSelect.select.closeMenu();
This (https://github.com/JedWatson/react-select/issues/1262) provided the final clue which helped me solve this. Thanks.
closeMenu() has been depreciated in v2 of React-Select. It has been replaced by blur() The following worked for me:
// Assign the ref in your Select object
<Select ref={input => this.selectRef = input } ... />
// Later in your code when you are trying to close the menu
this.selectRef.select.blur();
Not sure if there have been breaking changes in the library since the first answer, but I had to do this:
ref={input => {
if (input) this.productSelectMenu = input._selectRef.select
}}
Then:
this.productSelectMenu.closeMenu();
Related
Is it possible to clear the input text (e.g. "qweqweqweqwe" in the example below) of the (Fluent/Fabric) NormalPeoplePicker programmatically?
I have tried accessing the input element (via the onBlur event) and attempted to change it's value and innerHtml but that doesn't work. Also, that doesn't seem to be a good way of doing it.
https://developer.microsoft.com/en-us/fluentui#/controls/web/peoplepicker
NormalPeoplePicker Component keep input value inside state and its not possible to change it directly:
const picker = React.useRef(null)
...
<NormalPeoplePicker
...
onBlur={() => {
if(picker.current) {
picker.current.input.current.value = ""; // Uncaught TypeError: Cannot set property value of #<Autofill> which has only a getter
}
}}
/>
From Official Documentation inside implementation section there is useful method updateValue which allows to change the input value.
const picker = React.useRef(null)
...
<NormalPeoplePicker
...
onBlur={() => {
if(picker.current) {
picker.current.input.current._updateValue("");
}
}}
/>
Codepen working example ln: 104.
Note:
This is a temporary solution, test every use case before production.
let orgSelected: ITag[] = [];
orgSelected.push({key:0 name:''});
const [selectedOrg,setselectedOrg] = useState(orgSelected);
On TagPicker Property just assign the statevalue like this.
selectedItems={selectedOrg}
This way the tagpicker property will always be selected with an empty item.
Good Morning! I am wanting to create a selection box where the user has several options of items to choose from and when clicking on a button, it triggers a function that shows all the values that the user chose in the form of an array, json or even arrays ( hard task).
In the React Native documentation, only simple examples of checkboxes using the component are provided and I wanted to go much further than the documentation provides me. What are the possible solutions to this problem? (from a simpler example to an advanced one) and what (s) ways can I explore this problem in order to solve it in the most practical and uncomplicated way?
Definitions and examples of official documentation:
https://reactnative.dev/docs/checkbox/ (CheckBox)
https://reactnative.dev/docs/button/ (Button)
With this problem, another one came up: build an application where the user selects shopping options (items) and a subtotal is displayed in the lower corner of the application as he selects or deselects the items he is going to buy, and there is also an option to reset the subtotal by returning it to the zero value.
From the problem mentioned at the beginning, what are the possible solutions to create this application previously mentioned in a practical and simple way?
Multi Checkbox example ( Updated with Hook )
export const Example = () => {
const [checkboxes, setCheckboxes] = useState([{
id: 1,
title: 'one',
checked: false,
}, {
id: 2,
title: 'two',
checked: false,
}]);
const onButtonPress = () => {
const selectedCheckBoxes = checkboxes.find((cb) => cb.checked === true);
// selectedCheckBoxes will have checboxes which are selected
}
const toggleCheckbox = (id, index) => {
const checkboxData = [...checkboxes];
checkboxData[index].checked = !checkboxData[index].checked;
setCheckboxes(checkboxData);
}
render(){
const checBoxesView = checkboxes.map((cb, index) => {
return (
<View style={{flexDirection:"row"}}>
<Checkbox
key={cb.id}
checked={cb.checked}
onPress={() => toggleCheckbox(cb.id, index)} />
<Text>{cb.title}</Text>
</View>
);
});
return (
<View>
{ checBoxesView }
<Button onPress={onButtonPress} title="Click" />
</View>
);
}
}
In a react app I am using ui-kitten components, specifically a Select component:
<Select
placeholder="Selecciona el departamento"
data={departmentOptions}
selectedOption={props.dept}
onSelect={(newDepartment) => {
props.setDepartment(newDepartment);
props.setDepartmentValidation(validationSuccess);
setDept(null);
// props.department = newDepartment;
}}
textStyle={textStyle.label}
controlStyle={styles.input}
style={{ marginBottom: 16 }}
labelStyle={textStyle.label}
icon={renderIcon}
/>
I would like to reset the Select component on the placeholder after every re-render, not the previous selected option.
I know that that method clear() is available as is described in the official documentation: ui-kitten docs but I don't know how to use those methods.
Any idea on how to use these methods (e.g clear(), blur(), show(), hide(), etc.).
I was wondering the exact same question too, and the docs weren't really clear about using methods. However, I found that the section on the Icons component has an example of how to use methods to animate the icons on the press of a button.
You need this at the start of your function body:
const select = React.useRef()
Then in your select component, have something like this:
<Select ref={select}>{...}</Select>
Finally, just do select.clear() when needed to clear the select component.
Let me know if this helps.
This one helped me const select = React.useRef(). I've shared a small snippet of code that you can refer to and the GitHub link that helped me.
const [clear, setClear] = useState(false);
// Create a ref
const select = React.useRef();
//useEffect to check when the clear value has changed
useEffect(() => {
//clear the ref when the clear value has changed
select.current.clear();
}, [clear]);
// Here is your select component
<Select
ref = {select} // ref we created before
selectedIndex = {selectedIndex}
onSelect = {(index) => setSelectedIndex(index)} >
<SelectItem title = "Option 1" / >
<SelectItem title = "Option 2" / >
<SelectItem title = "Option 3" / >
</Select>
Check out this issue on the UI-Kitten GitHub repo.
Here is the link to the comment that helped me. https://github.com/akveo/react-native-ui-kitten/issues/1001#issuecomment-612070876
I am using checkbox given by vue-element, visit https://element.eleme.io/#/en-US/component/checkbox.
But in edit mode they are not able to select anymore.
Please help me out.
<el-checkbox-group v-model="form.activity_type" size="small">
<el-checkbox-button
v-for="(all_type,index) in all_activity"
:key="index"
:label="all_type.id"
>{{all_type.activity_type_name}}</el-checkbox-button>
</el-checkbox-group>
<el-checkbox-group v-model="form.activity_type" size="small">
<e`enter code here`l-checkbox-button
v-for="(all_type,index) in all_activity"
:key="index"
:label="all_type.id">
{{all_type.activity_type_name}}
</el-checkbox-button>
</el-checkbox-group>
Hi you in order to show checkbox in edit mode you can do it like this:
data() {
return {
form: {
activity_type: []
}
};
}
import {activityData} from "#/api/activity";
2)under method function:
activityData(id).then(response => {
this.form = response.res;
});
3) and then from your controller function you can pass data in this format:
$allData = [];
$allData['activity_type'] = array(1,3);//the ids one you want to show check
return response()->json(["res" => $allData]);
I'm new to Titanium so maybe my question is a newbie one, but I'm trying to dynamically populate an option Dialog (use Alloy framework).
Is it possible to create a new ArrayCollection and pass it to my optionDialog like this :
<OptionDialog id="dialog" title="Choose Calendar" src=getAllCalendars>
<Options>
<Option id="{calendar_id}">{calendar_name}</Option>
</Options>
</OptionDialog>
Where getAllCalendar is a function that return a new Array Collection.
I know I've done things like this before in Flex but I can't make it work on Titanium so maybe it isn't the right way.
Thank you for your answers.
You need to write code in js file in Appcelerator(Alloy).
For that way you can easily get that click events.
var dialog = Ti.UI.createOptionDialog({
options : options,//Array
title : 'Hi <?'
});
dialog.show();
dialog.addEventListener('click', function(_d) {
onclickactions[_d.index];
});
I came up with this. If you opt to just create the dialog box, which works in alloy using the classic method, you can do this.
For me, the key part was to keep the order of the options with my options array. After the option was selected, you could then reference the options array with the e.index to find which was selected.
function companyDialog(){
// Build the list of options, maintaining the position of the options.
if(Alloy.Globals.Form){
Alloy.Globals.Form.Controller.destroy();
}
// My list of companies returns companyname, companycode, id
companies = db.listCompanies();
var options = [];
_.each(companies, function(val){
options.push(val.companyname + " (" + val.companycode + ")");
});
options.push("Cancel");
var dialog = Ti.UI.createOptionDialog({
title : 'Companies',
options : options
});
dialog.addEventListener('click', function(e) {
var setCode = "";
var selection = "Unknown";
if(options[e.index] != "Cancel") {
// DO WORK HERE.
alert(options[e.index].companyname);
}
});
dialog.show();
}