So I have this problem with the rendering of contenteditable cells that drives me crazy. I have b-table like this
<b-table
v-once
v-if="showTable"
:small="true"
:items="timeSerres"
:fields="timeSerriesX"
:primary-key="timeSerriesX[0].key"
striped hover responsive selectable
#focusout.native="editCell"
>
</b-table>
I am setting :fields like this
this.timeSerriesX[j]={
key:'t-'+diff.toString(),
label:this.$moment(this.endDate).add(-diff, 'M').format('MMM-YY'),
tdAttr:{contenteditable:true}
}
I am setting :item, like this
this.rowText.split('\t').reverse().forEach(function(element,i_) {
row['t-'+i_]=element
});
this.timeSerres.push(row);
To detect editing I capture focusout native event and handle it like this
editCell(event)
{
var row_index = event.target.parentNode.rowIndex-1
var cell_index = event.target.cellIndex;
var newValue = event.target.innerText;
var row = this.timeSerres[row_index]
var key = this.timeSerriesX[row_index].key;
row[key]=newValue;
this.$set(this.timeSerres,this.rowIndex,row);
},
This approach works fine until I hit the corner case. When the cell is initially empty, and then I input data into the table cell, the input will be rendered twice when focus out.
E.g click on empty cell, input "1" then focus out the browser will render actually "11";
Or click on empty cell, input "ab" then focus out the browser will render actually "abab"
Please help!
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 have just started with Dojo widgets. Recently, I did this Dijit Horizontal Slider Sample,and I have been wondering how to make a tooltip follow the slider handle with the current slider value as the tooltip content.
I have tried the same but am facing two issues:
One, the tooltip appears at the end of the slider rather than constantly hovering on the slider handle.
Two, the tooltip displays a value only when I stop sliding rather than changing seamlessly.
How to overcome these?
If you want the tooltip to move with the slider, you have to find a way to open it from the slider handle, not from the entire horizontal slider widget. I do not know if the actual slider you move with the mouse is it's own widget or not. From the declarative sample online the HTML for the handle looks like this
<div data-dojo-attach-point="sliderHandle,focusNode" class="dijitSliderImageHandle dijitSliderImageHandleH" data-dojo-attach-event="press:_onHandleClick" role="slider" aria-valuemin="-10" aria-valuemax="10" tabindex="0" aria-valuenow="4" style="position: absolute;"></div>
So you can try something like the following, if you can get a reference to the sliderHandle object.
/*
* Create the tooltip dialog that you want to show (I use tooltip dialog,
* but you can do the same with basic tooltip)
*/
var myTooltipDialogbase = new ttdialog({
id: 'myTooltipDialogBase',
style: "width: 275px;"
});
Then in your event handler (in this example right mouse click) you open the popup
/**
* On right mouse click, opens the tooltip dialog
*/
on(sliderHandle, 'contextmenu', function (event) {
popup.open({
parent: sliderHandle,
popup: myTooltipDialogbase,
around: sliderHandle.domNode
});
});
EDIT:
For your second question, you can use the slider property onChange() to do something each time the value of the slider changes. You must set intermediateChanges=true so onChange is called when sliding. In your case, in onChange(), if you can get a reference to the tooltip, then change the value of one of the tooltip objects for every value change of the slider.
I have two widgets in a view one of those is a yii CGridView widget and another is a calender widget
Basically both the calender and the grid does the same task of displaying the events but in different styles.
What i need is i place a button on the top and by clicking on that my widgets will toggle
Suppose currently gridview is being displayed if i click the button then the calender view will be displayed and the other way round
Please help me how to accomplish this without using jquery.
Here's what you can do:
<span id="grid">Grid</span><span id="calendar" style="display:none;">Calendar</span>
<button id="tglBtn">Toggle</button>
<script type="text/javascript">
var btn = document.getElementById('tglBtn');
var grid = document.getElementById('grid');
var calendar = document.getElementById('calendar');
btn.addEventListener('click', toggle);
function toggle() {
grid.style.display = (grid.style.display == 'none') ? 'block' : 'none';
calendar.style.display = (calendar.style.display == 'none') ? 'block' : 'none';
}</script>
What you do basically is, hide one of the widgets using css and then attach a click event listener to the toggle button that handles the switching.
Hope that helps :D
When a page has a search box with multiple tabs, one of the tabs is always selected; either the default tab is selected or the user has changed the tab. In either case the search input box of the selected tab should always have the keyboard focus so the user can just start typing their keywords.
Example: search box on http://www.lib.umd.edu/
Do you know how I could get the focus to be in the input box when a different tab is clicked? I got it to work on the first tab, but when I click another tab, the focus is lost.
The script I am using:
<script type="text/javascript" language="JavaScript">
document.forms[''].elements[''].focus();
</script>
$(document).ready(function () {
setTimeout(function () {
// focus on the txtenclude text area first visible and enabled input field or textarea
$(":input:visible:enabled").each(function () {
if ($(this).is('textarea')) {
$(this).focus();
return false;
}
});
}, 1000);
Your code snippet
To set the focus on a certain element you have to specify which element should receive the focus. In your snippet this specification is missing:
document.forms[''].elements[''].focus();
If you want to you can use this line: document.getElementById("DuringSearch").focus();
DuringSearch is the id of the input element that should receive the focus <input id="DuringSearch" type="text">
The problem that needs to be solved is to change the id based on the tab that was clicked.
There are several ways to achieve this. In a previous post is used an attribte named data-tab.
Example to wire up tabs and focus to input
To attach an event handler to a click on a tab you can do the follwing (using jQuery) on document.ready:
// add event handler for click on tab
$("#tabs li").click(function () {
loadTabs(this);
setFocusOnInput(this);
return false;
});
If you click on a tab the attached event fires and executes the 2 functions: loadTabs and setFocusOnInput.
To set the focus you need to know the id of that input-box. In my exmaple i am using an attribute data-tab
<li data-tab="Before">
Before
</li>
In my example i use the following function:
function setFocusOnInput(_this){
var tab = $(_this).attr("data-tab");
var searchId = tab + "Search"
console.log("_this:", _this);
document.getElementById(searchId).focus();
}
See more explanations on my previous post.
Could you elaborate what you want to know. Do you want to know how to wire it up in general or how to do it in a specific case?