Problem
When performing an "OnChange" event for a time only picker, I am always receiving a double event for the first instance.
From what I can see it is parsing the current time first and then the selected time.
This also means there is an issue when keying in the time manually on the first instance too.
Example
https://jsfiddle.net/ux2dy5th/
$("#start-time").flatpickr
(
{
noCalendar: true,
enableTime: true,
inline: true,
onChange: function(selectedDates, dateStr, instance)
{
alert(dateStr)
}
}
);
Desired Outcome
Only one "OnChange" event is triggered, that being the time that the picker is changed to (through clicking or keying in). No "OnChange" event being triggered for the current time.
Context
I am aiming to have two time pickers (a start time and finish time), where the max and min are set by on change events. The start picker can never exceed the finish time, and the finish cannot be set earlier than the start time.
Related
When I pass the minimum time (min parameter) for the date picker, 02:00 is the minimum for example, but it starts selecting the not allowed value 00:00, if the user clicks OK, it sets the wrong not allowed value.
If I change to an allowed time, 03:00 for example, then I can't click again at 00:00 (expected behavior).
The image shows how the time picker starts once you click it. Note that I passed '02:00' as the minimum time and it started at 00:00 and the user is allowed to click OK and set the wrong time.
PS: I am using the vuetify-datetime-picker library
You cannot use min for this, rather use the built in props in v-time-picker called allowed-hours.
If you want to block 00:00, 01:00 and 02:00, then set allowed-hours like this:
<v-time-picker
:allowed-hours="v => v > 2 && v <= 23"
format="24hr"
/>
More information can be found here.
I'm trying to input a date string formatted mm/dd/yyyy into a Kendo React DatePicker control using nightwatch setValue. It seems that no matter what approach I take to select the control it always sets the cursor on the year portion first and typing then only fills in those four characters.
(For example if I provide '05/06/2016', all I see typed into the input is 'mm/dd/0016' and month and day never update.)
The control seems to work fine in a normal scenario if I click with the mouse on the month field, the cursor will display there and if I type 2 characters, a / 2 more characters another / and then the last 4 the control is working properly. It just seems to be an issue with selenium selecting the control and DatePickers default behavior.
I've tried using browser.Key.LEFT_ARROW to see if I could move the cursor left twice first since the accessibility handling allows for it. I also tried calling clearValue() on the input first then typing from scratch but no success on either case.
I would rather not have select the date using the calendar control if I can avoid it.
Here's what my code looks like currently:
const consumerInfo = {
birthMonth: "05",
birthDay: "06",
birthYear: "2016",
birthDate: "05/06/2016",
};
const datePickerSelector = '.myDatePicker';
const datePickerInputSelector = '.myDatePicker .k-input';
browser.waitForElementVisible(datePickerSelector, DEFAULT_WAIT_TIME)
.waitForElementVisible(datePickerInputSelector, DEFAULT_WAIT_TIME)
.setValue('.myDatePicker .k-input, [
consumerInfo.birthYear,
browser.Keys.LEFT_ARROW,
consumerInfo.birthDay,
browser.Keys.LEFT_ARROW,
consumerInfo.birthMonth,
])
.assert.value(
datePickerInputSelector,
consumerInfo.birthDate,
`Birthdate is set to ${consumerInfo.birthDate}`
);
Any suggestions are appreciated.
While not perfect I came up with a solution so hopefully it helps some others should this come up.
The approach ended up being roughly similar to what I proposed above but allowing more time between each operation. I added it into a util function that accepts the selector to target the input control with along with the month/day/year to fill in the control with. It's possible the time intervals can be reduced in places to less than 500ms but without more exhausted testing that was better than 1000ms (which worked) and 100ms (which inconsistently worked).
See below:
const toDatePickerInsertion = (browser, pickerInputSelector) => ({
month,
day,
year,
}) => {
return browser
.click(pickerInputSelector)
.pause(500)
.keys(browser.Keys.LEFT_ARROW)
.pause(500)
.keys(browser.Keys.LEFT_ARROW)
.pause(500)
.keys(month)
.pause(500)
.keys(browser.Keys.RIGHT_ARROW)
.pause(500)
.keys(day)
.pause(500)
.keys(browser.Keys.RIGHT_ARROW)
.pause(500)
.keys(year);
};
I'm automating e2e tests with Protractor on an angular app.
However, I have an issue when sending keys on input fields.
The sendKeys would miss few characters everytime so I found a workaround :
static sendKeys(value, element){
value.split('').forEach((c) => element.sendKeys(c));
}
This works well but it takes more than 3 times the time the original sendKeys function would.
Well no problem my tests are still functionnal right ?
My app now has new fields with scripts behind them.
One of them is a datepicker input, you can either choose from the datePicker or type it manually. However, for today's date you would type 09022018 and the slashes are automatically appended at the right place (like so 09/02/2018). If you were to enter a wrong date the field is cleared.
Now back to the problem : it seems that both my implementation of sendKeys and the original one loose focus after each submitted key. This means that I can't enter a valid date in the input field as it's cleared after each simulated keypress.
I could use browser.executeScript to fix it but I wouldn't be able to test the functionnality adding slashes. Also, as you type, the datepicker is still open and refreshes after each keypress, you can select a date from it at any time and that is also a feature I want to test.
Thanks in advance
Use executeScript to set the date in backgrond, then use sendKeys to enter a space or Tab at the end to trigger the Keyborad event which will check the input and format the input with slash
function enterDate(date) {
var script = 'arguments[0].value=arguments[1]';
// input box for date
var dateBox = element(by.xxx(yyy));
browser.executeScript(script, dateBox, date);
dateBox.sendKeys(" ");
// or try send Tab
dateBox.sendKeys(protractor.Key.TAB);
}
enterDate('09022018');
You can try this solution on other fields you fixed but take 3 more time.
I have a QLineEdit and a slot that processes the textEdited signal.
I don't want to validate the text, just use it to filter a list of names (different widget) with the ones matching the text in the QLineEdit.
I have found that the text shown in the QLineEdit is only updated after the signal is processed, and the question is: can I make the new text show in the QLineEdit first and then process the signal?
Now I have:
1. let's say user presses 'A' key in the QLineEdit
2. textEdited signal is emitted (but QLineEdit is not visually updated yet)
3. signal is processed in my slot (filtering a QListWidget)
4. QLineEdit is updated, showing the effect of pressing the key 'A'
If step 3 takes a long time there is too much delay between the key is pressed and it's shown in the QLineEdit, so I want:
1. let's say user presses 'A' key in the QLineEdit
2. textEdited signal is emitted (but QLineEdit is not updated yet)
3. signal is processed in my slot (filtering a QListWidget)
i) update the QLineEdit object to reflect the pressed key 'A'
ii) filter the QListWidget
How can I do that? I need something like a QLineEdit.refresh() method? As I said I don't need to validate de text, I just want to use it to filter the content of a QListWidget, so I want everything the user edit to be shown as fast as possible.
EDIT: I've found that QCoreApplication.processEvents() does the work, but it affects the process of the signal, and some pressed keys don't trigger the signal, although I don't understand why. It seems that if the user say edits the QLineEdit pressing two keys "too fast" then the call to processEvents() in my slot (while processing the first key) processes the second key, so the second key is not processed by my slot. Does it make sense?
Use a single-shot timer:
self.timer = QtCore.QTimer()
self.timer.setSingleShot(True)
self.timer.setInterval(300)
self.timer.timeout.connect(self.filterList)
self.edit.textChanged.connect(lambda: self.timer.start())
This will keeping re-starting the timer until there's a pause greater than the timer interval, at which point the timeout signal will be sent and the slot connected to it will be called.
You may need to adjust the interval to suit the typing speed.
I have a function which adds a button to a div "dettaglio_utenti". After calling the function with this instruction
tab+="<button data-dojo-type='dojox.mobile.Button' id='apri_mappa' onClick=\" location.href='tel:"+telefono+"'\">apri mappa</button>"
var vText = document.getElementById("dettaglio_utente");
vText.innerHTML = tab;
require(["dojo/parser"], function(parser){
parser.parse(vText);
});
It works only the first time that I display the page. The second time the button is not parsed and I see this error in the browser console: dojo/parser::parse() error Error: Tried to register widget with id==apri_mappa but that id is already registered
When you display the page for the second time, the first page must still be part of the dom. (Maybe this is a worklight feature, single page app?). So when dojo parses the second page it gives the error because the button with that id has already been created.
I don't believe preventing the parsing of the button a second time will accomplish what you need. I think your options are:
Destroy the widgets from the first page.
If you don't need an id on the button, you can omit it and Dojo will create an id that won't collide.
If you need the id, you can or use a counter when emitting the id of the button.
id='apri_mappa_' + i where i is the counter.
Only knowing what you wrote above, I think the order of preference is 2,1,3.
EDIT - How to destroy a widget
require(['dijit/registry'], function(registry) {
registry.byId('apri_mappa').destroy();
});