I have this iterator that displays several components:
https://codepen.io/anon/pen/zRyGmq
The problem is, when I click the menu button on one of them, the value of menu v-model changes to true for all of them.
Related
I'm fairly new to vuetify and vue in general. The problem I'm facing is that when I click on a datepicker, the calendar pops up and when I tab out, the cursor moves to the next input field but the calendar does not close.
I want it to close automatically on tab out.
I tried setting close-on-content-click="true" instead of false but to no avail. I'm not sure what else to try.
Here is a codepen I found vuetify documentation that has similar implementation and behavior as my application. codepen
Thank you for any inputs.
add this #keydown.tab='menu1 = false' in v-text-field
close-on-content-click is for mouse clicks and does not apply to keyboard actions. You need to explicitly toggle the v-menu model when the input loses focus.
To close the menu when whenever the input field loses focus I would attach the toggle to the blur event. You can do this by replacing the #blur listener to a method, in which you will set the menu model to false.
<v-text-field
v-model="dateFormatted"
label="Date"
hint="MM/DD/YYYY format"
persistent-hint
prepend-icon="mdi-calendar"
v-bind="attrs"
#blur="updateDate"
v-on="on"
/>
updateDate(event) {
// This is the same value as dateFormatted,
// you don't need to say this.dateFormatted like in your codepen.
const value = event.target.value;
this.date = this.parseDate(value);
this.menu1 = false;
}
"Destructuring" is JS good practice instead of randomly named variables or verbosity so I would write the first line as:
const { value } = event.target;
If you were passing additional variables into updateDate method you would need to write it as updateDate($event, variable) but if not, $event as first parameter is a given.
I have a v-combobox component in my app. I have it to where I can type something in the input then #blur a check happens to see if the typed Item exists in the list or not. If it does not exist a modal opens up asking the user if they want to add it to the list.
I have it if the user clicks yes it is added to the list the problem I am having is if they click cancel and the dialog is closed focus should go back to the combobx input
When I try and set the focus I get the blue animation bar but no input cursor in the input of the combo box
I have set up a codesandbox example of my issue
CodeSandbox Example of Issue
I was wondering If i could get some help or pointers on why Im not getting the full focus to be able to type after clicking cancel on the dialog .
You can try to use $nextTick like this:
closeConfirmationDialog() {
// const comboBox = this.$refs[this.forInput];
// comboBox.$el.querySelector("input").focus();
this.showDialog = false;
this.cancelDialog = true;
this.$nextTick(() => {
this.$refs.categories.focus();
});
}
I'm using Element UI's split-button which renders an extra button which is not in the template. However, I can get access to the button in question by setting ref="dropdown" on the dropdown holding this button, and referring to it with this.$refs.dropdown.$children, and finally loop over the $children array. Now, I want to set the HTML attribute disabled on this button but I can't seem to find a straightforward way to do this in the Vue docs.
How do I go about setting attributes on references?
You could use vm.$el to get the underlying Element, and then use Element.querySelector to select the dropdown's caret button. With the button reference, you could then use Element.setAttribute('disabled', '') to add the disabled attribute, and Element.removeAttribute('disabled') to remove it:
const btn = this.$refs.dropdown.$el.querySelector('.el-dropdown__caret-button');
if (enabled) {
btn.removeAttribute('disabled');
} else {
btn.setAttribute('disabled', '');
}
demo
I have a custom menubutton in my tinyMCE editor that uses specific HTML elements elsewhere on the page as the menu items. I use a jQuery selector to get the list of elements and then add one each as a menu item:
c.onRenderMenu.add(function(c,m) {
m.add({ title: 'Pick One:', 'class': 'mceMenuItemTitle' }).setDisabled(1);
$('span[data-menuitem]').each(function() {
var val = $(this).html();
m.add({
title: $(this).attr("data-menuitem"),
onclick: function () { tinyMCE.activeEditor.execCommand('mceInsertContent', false, val) }
});
});
});
My problem is that this only happens once when the button is first clicked and the menu is first rendered. The HTML elements on the current page will change occasionally based on user clicks and some AJAX, so I need this selector code to run each time the menu is rendered to make sure the menu is fully up-to-date. Is that possible?
Failing that, is it possible to dynamically update the control from the end of my AJAX call elsewhere in the page? I'm not sure how to access the menu item and to update it. Something using tinyMCE.activeEditor.controlManager...?
Thanks!
I found a solution to this problem, though I'm not sure it's the best path.
It doesn't look like I can make tinyMCE re-render the menu, so instead I've added some code at the end of my AJAX call: after it has updated the DOM then it manually updates the tinymce drop menu.
The menu object is accessible using:
tinyMCE.activeEditor.controlManager.get('editor_mybutton_menu')
where mybutton is the name of my custom control. My quick-and-dirty solution is to call removeAll() on this menu object (to remove all the current menu items) and then to re-execute my selector code to find the matching elements in the (new) DOM and to add the menu items back based on the new state.
It seems to work just fine, though tweaks & ideas are always welcome!
I have a grid in which one column is having itemrenderer as textarea. My application is menu controled. Now I want to perform edit operations on the textarea using menu items.
Like if I select some text from a textarea in the grid, then I select a menu item "Cut" then it should cut the selected text from the textarea. In this manner I would lie to perform all operations.
I am not getting how to get that the operation is to be performed on which textarea?
inside your menu item click handler, try:
var fcs:IFocusManagerComponent = focusManager.getFocus();
if(fcs is TextArea)
{
var txt:String = TextArea(fcs).text;
System.setClipboard(txt);
}