I am developing an add-in for Outlook using office-ui-fabric-react, using Typescript. I have a dialog that has a choice group, a text field, a default button, and a primary button, as shown here:
export interface ChoiceGroupDemoProps {
onChoiceGroupChange: (ev: React.FormEvent<HTMLInputElement>, option: any) => void;
onTextFieldChanged: (newText: string) => void;
onSubmit: () => void;
onCancel: () => void;
}
export const ChoiceGroupDemoForm: React.StatelessComponent<ChoiceGroupDemoProps> = (props: ChoiceGroupDemoProps): JSX.Element => {
return (
<div>
<div>
<ChoiceGroup
defaultSelectedKey='A'
options={[
{
key: 'A',
text: 'Test 1',
} as IChoiceGroupOption,
{
key: 'B',
text: 'Test 2'
},
{
key: 'C',
text: 'Test 3',
}
]}
required={true}
onChange={props.onChoiceGroupChange}
/>
<TextField
multiline
rows={4}
placeholder='Comments'
onChanged={props.onTextFieldChanged}
/>
<div>
<DefaultButton text='CANCEL' onClick={props.onCancel} />
<PrimaryButton text='SUBMIT' onClick={props.onSubmit}/>
</div>
</div>
</div>
);
};
The choice group radio buttons require two clicks to select a button, and typing in the text field deselects the radio buttons.
None of the examples show anything beyond a choice group by itself. How do I get a component to work with this combination of ui components?
Upgrading to version 6.153.0 solved the problem.
Related
I use vue-select in my project
When I use value and input alternative v-model
<div v-for="user in users" key="user.id">
<v-select
ref="Vueselect"
:value="user.roleName"
label="title"
:clearable="false"
:options="roleCategory"
#input="item => ChangeRole(item,user)"
/>
</div>
roleCategory
data() {
return {
roleCategory:[{value: 1 , title:'user'},{value: 1 , title:'admin'}],
users:[{id: 1 , title:'Test1',roleName='user'},{id: 2 , title:'Test2',roleName='admin'}],
}
},
ChangeRole()
methods: {
ChangeRole(item,user) {
this.$swal({
title: 'Are you sure?',
text: 'Do you want to change permision!',
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'Yes, Change it!',
customClass: {
confirmButton: 'btn btn-primary',
cancelButton: 'btn btn-outline-danger',
},
buttonsStyling: false,
}).then(result => {
if (result.isConfirmed) {
user.roleName = item.roleName
}
})
}
}
i use Sweet Alert
the dropdown after select not close
how can close dropdown programmatically
There is a solution to close v-select programmatically.
In your case this may help you:
const searchEl = this.$refs.Vueselect.searchEl;
if (searchEl) {
searchEl.blur();
}
I'm creating an application that has a selection box to choose between some template data. However, the user should be able to select the same template option several times and, each time he selects the template, a new informational box appears in the screen.
My problem is that the v-autocomplete component doesn't enable this kind of behavior: we can select one option (or multiple options), but not the same option twice.
I thought about making something like this: every time the user selects the option A, the infobox would appear below and the component would reset to a empty option. Then, the user could choose option A again and, when he chooses it, another info box would appear, how many times the user needs it.
How could I do something like this using vue? I didn't found any component that would do something like this on default, so I think I'll have to tweak the component behavior, but I don't know exactly where to start.
My template:
<template>
<div class="select-wrapper" id="selectBox">
<v-autocomplete
class="select-input"
:items="items"
:name="label"
placeholder="select item"
solo
:value="value"
#change="$event => onChange($event, items)"
item-text="name"
item-value="value"
:required="required"
:rules="[
value =>
!required ||
!!value ||
"required"
]"
></v-autocomplete>
</div>
</template>
And my Vue code:
<script lang="ts">
import { defineComponent } from "#vue/composition-api";
import Vue from "vue";
interface SelectItem {
name: string,
value: string
}
interface SelectBoxProps {
items: SelectItem[];
value: string;
onSelect: ({ target }: { target?: SelectItem }) => void;
hasResetSelection: boolean;
}
export default defineComponent({
name: "SelectBox",
props: {
label: String,
items: Array,
value: [String, Number],
onSelect: Function,
disabled: Boolean,
required: {
type: Boolean,
default: false
},
hasError: Boolean,
errorMessage: String,
hasResetSelection: {
type: Boolean,
default: false
}
},
directives: {
ClickOutside
},
setup({ onSelect, hasResetSelection }: SelectBoxProps) {
const onChange = (selectedValue: string, itemsArr: SelectItem[]) => {
const targetItem = itemsArr.find(i => i.value === selectedValue);
if (hasResetSelection) {
Vue.nextTick(() => {
console.log("onselect should reset value");
return onSelect({ target: { name: "", value: "" } });
});
}
return onSelect({ target: targetItem });
};
return {
onChange
};
}
});
</script>
This was my last attempt with Vue.nextTick, I already tried to tweak the component with ref() and it didn't work as well. Do you have any suggestions?
You can use another variable just to hold the input for the autocomplete component Like this:
var app = new Vue({
el: '#app',
vuetify: new Vuetify(),
data: {
items: [{ name : 'hello', value : 1 }, { name : 'world', value : 2 }],
value : null,
values : []
},
methods: {
onChange() {
this.values.push(this.value)
this.$nextTick(() => {
this.value = null
})
},
}
})
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-container>
Values : {{values}}
<v-autocomplete
:items="items"
placeholder="select item"
solo
v-model="value"
item-text="name"
item-value="value"
#change="onChange"
/>
</v-container>
</v-app>
</div>
I am trying to create Quasar custom select component with autocomplete. Everything works fine except the validation error, the validation error is showing only when I click the input box and leave without adding any value. But, the form is submitting even there are any errors.
Component code
<q-select
ref="members"
v-model="sModel"
use-input
:options="filteredOptions"
:multiple="multiple"
:use-chips="useChips"
:label="label"
:option-label="optionLabel"
:option-value="optionValue"
#filter="filterFn"
#input="handleInput"
emit-value
map-options
hint
dense
outlined
lazy-rules
:rules="rules"
>
<template v-slot:prepend>
<q-icon :name="icon" />
</template>
</q-select>
</template>
<script>
export default {
props: {
value: Array,
rules: Array,
icon: String,
label: String,
optionValue: String,
optionLabel: String,
options: Array,
multiple: Boolean,
useChips: Boolean
},
data () {
return {
filteredOptions: this.options,
sModel: this.value,
validationErrors:{
}
}
},
methods: {
filterFn (val, update) {
if (val === '') {
update(() => {
this.filteredOptions = this.options
// with Quasar v1.7.4+
// here you have access to "ref" which
// is the Vue reference of the QSelect
})
return
}
update(() => {
const needle = val.toLowerCase()
const optionLabel = this.optionLabel
this.filteredOptions = this.options.filter(function(v){
// optionLabel
return v[optionLabel].toLowerCase().indexOf(needle) > -1
})
})
},
handleInput (e) {
this.$emit('input', this.sModel)
}
},
}
</script>
In the parent component, this is how I am implementing it,
<AdvancedSelect
ref="members"
v-model="members"
:options="extAuditEmployees"
icon="people_outline"
multiple
use-chips
label="Team Members *"
option-label="formatted_name"
option-value="id"
:rules="[ val => val && val.length && !validationErrors.members > 0 || validationErrors.members ? validationErrors.members : 'Please enter Team members' ]">
</AdvancedSelect>
Try adding this method on select component methods:
validate(...args) {
return this.$refs.members.validate(...args);
}
It worked for me, apparently it sends the validation of the input to the parent
Source consulted: https://github.com/quasarframework/quasar/issues/7305
add ref to the form and try to validate the form.
you can give give props "greedy" to the form.
I am using vuesax multiple select component to select multiple options from the available options. But when I try to submit/Insert the selected value to my API, the values from the component are being passed as arrays. But my API accepts only string values. Can anyone help me with code to this problem?
Vuesax component code
<vs-select multiple autocomplete v-model="newRecord.required_sub" label="Subject" class="selectExample mt-5 w-full" name="item-category" v-validate="'required'">
<vs-select-item :key="item.value" :value="item.value" :text="item.text" v-for="item in teach_mode_drop" />
</vs-select>
my script for options
teach_mode_drop: [
{text:'Option1', value:'Option1'},
{text:'Option2', value:'Option2'},
{text:'Option3', value:'Option3'},
{text:'Option4', value:'Option4'},
],
main method
createRecord() {
this.$vs.loading();
jwt.createLeads(this.newRecord).then((response) => {
this.$vs.loading.close();
this.$vs.notify({
title: 'Success',
text: response.data.message,
iconPack: 'feather',
icon: 'icon-alert-circle',
color: 'success'
});
this.$store.dispatch("userManagement/upsertToState", { type: "Leads", data: response.data.leads });
this.newRecord.first_name = this.newRecord.last_name = this.newRecord.email_id = this.newRecord.phone_number = this.newRecord.location = this.newRecord.required_sub =''
}).catch((error) => {
console.log(error)
this.$vs.loading.close();
this.$vs.notify({
title: 'Error',
text: 'There was an error creating the Lead',
iconPack: 'feather',
icon: 'icon-alert-circle',
color: 'danger'
});
});
},
In my application I used office ui fabric react drop down control, when I click on button I need to check it's empty or not?
public options = [
{ key: 'Employee Name', text: 'Employee Name' },
{ key: 'Employee ID', text: 'Employee ID' },
{ key: 'Department', text: 'Department' }
];
<Dropdown defaultSelectedKey="Employee Name" options={this.options} onChange={this._onChange} />
<input type="button" value="Get Data" id="btnSub" onClick={() => this.readItem()} />
private readItem(): void {
what I need to do here
}
read the value from the event target.
(e) => this.readItem(e.value.target)