Develop Reference

Testing react-big-calendar events

I am using react-big-calendar's month view in my app. If I have more than 2 events on the same day, the first event added stays and a "+X more" button appears (where the X is of course the number of events left for that day). This works just fine in the app, but when I try to unit test it, no matter how many events I add on the same day, the "+X more" button does not appear, and I can still access all the events of that day, even though they shouldn't be visible anymore. This is a problem for me because I have implemented some more functionality on that button which I need to test, but since I can't reach it in testing I can't even simulate a click on that.
Why doesn't this exist in test mode?
After screen.debug() I was thinking that the problem might be that the button appears when there is not enough space to display all the events, and since the testing environment simpler than the running app, works differently, there is no space check and therefore no button needed. I don't know if I am right but I still need to test it somehow.
Is there a way to access it somehow in my tests?

Events are placed in date cells according to a sort order, and the amount of space available. The 'Show more +' link only shows when there isn't enough space to place the events. Size of these cells is determined by the overall container wrapper size around your calendar, as Big Calendar uses flexbox layout. It may be that you need to apply a specific height to your container for the testing to pick it up right.

Keyboard support in interact.js drag

I've setup interact.js draggable as -
interact('.draggable')
.draggable({
onstart: (event: Interact.InteractEvent) => onstartRef.current(event),
onmove: (event: Interact.InteractEvent) => onmoveRef.current(event),
onend: (event: Interact.InteractEvent) => onendRef.current(event)
})
I was trying to add support for a11y with keyboard drag with interact.js but could not find anything in documentation for it. How to bind "dragStart", "dragMove" and "dragEnd" events with keyboard events.
I could find a github issue but is there more information - https://github.com/taye/interact.js/issues/275.
I'm starting with listening to keyboard arrow-left, right, up, down, and willing to start "onStart", "onEnd" and "onMove".
switch (event.key) {
case 'ArrowLeft':

It’s quite likely that the dragging is not essential to your application, and that other interactions, like context menus, can achieve the same goal.
Don’t try to force it and replicate the exact same interaction, just with keyboard. Steering an element across the screen by means of arrow keys might be playful at first, but is cumbersome when trying to get a job done.
Plus, it still is inaccessible to users with vision impairments.
The WCAG 2.2 explicitly demand a single pointer interaction
Success Criterion 2.5.7 Dragging Movements (Level AA): All functionality that uses a dragging movement for operation can be achieved by a single pointer without dragging, unless dragging is essential or the functionality is determined by the user agent and not modified by the author.
The currently sole sufficient technique to satisfy that criterion is listing some examples:
Example 1
A list of items can be re-ordered by picking up an item and dragging it upwards or downwards. Other elements move dynamically to open a gap where the picked-up target can be dropped. After a single pointer activation, the list items display up and down arrows which allow a step-wise re-ordering of the list via single pointer inputs (taps or clicks at the up or down arrow).
A vertical priority list indicates the priority of items listed. Each item can be ‘picked up’ with a pointer and dragged up or down to another position. The other list items rearrange dynamically. To the left of each list item, a number in a text field shows the current priority position. For any of the items, users can put in another number. This leads to a dynamic reordering and renumbering of the priority list.
In a Kanban implementation for process management, tasks can be dragged horizontally from one ‘swimming lane’ to another in order to change the status of tasks (for example, to change the status of a task from “in process” to “completed”). One or several items in a lane can be selected by a single tap or click. A single pointer activation of a drop-down menu labelled “Move selected items to” offers a selection of drop targets (other lanes). A further single pointer activation over the desired menu item moves targets to the specified lane.
In a radial control widget, the visual indicator of the current value of the control can be dragged to a different position. Users can also click or tap on another position of the radial control to change the value.
In windows, you can drag an item onto your trash icon, or you can right click it and select “Delete”. The context menu is keyboard accessible.

Return mouse position at a given time

I want to set the position of something relative to the current position of the mouse.
Is there a way that I can get the current position of the mouse without needing to constantly track where it is?
Ideally can I use the window property to find it?

Any way to track mouse position you have to use an event listener. if you have to do some different actions while tracking continuously would create issues like freezing.
To avoid these kinds of issues, we have two techniques
Event debouncing (listen based on a particular interval condition)
Event Throttling (to control the rate of listening)
check out this link https://codeburst.io/throttling-and-debouncing-in-javascript-b01cad5c8edf

How to prevent click on interval in Ion.RangeSlider?

In Ion.RagerSlider plugin the interval bar is clickable.
This is an issue on mobile devices when the user accidentally click the element when he's trying to scroll.
How can i disable the click event on interval bar?
I was unable to find the solution in the official documentation.

I am facing the same issue where, if tapping outside the selected range on the bar, the whole range gets shifted across to the tap location. Depending on the location and size of the bar on the screen, it is quite easy to inadvertently do this and lose the slider values.
While it is not officially supported by version 2.3.1, I found that removing the binding of touchstart and mousedown events to the range line did the trick.
https://github.com/IonDen/ion.rangeSlider/blob/2.3.1/js/ion.rangeSlider.js#L686#L687
A more generic approach could be to create a new config parameter named something like disable_line_touch with a default value of false, and only skip the above binding if its value is set to true.

Can I force the "hover" state to be refreshed with IE8?

In some corporate web application, I have some troubles with the :hover css selector with IE 8 users.
Basically, I have a lot of javascript, and the page sometimes is a bit slow.
Especially, my issue occurs in a sortable table (yes tables suck, but I have to live with it by now).
Within each row, I have a button that performs some operation. The button have :hover css rules to make it highlighted on mouse hover.
But in a specific case, the hover state remains, even if the mouse is no more on the element.
You can see the behavior on jsfiddle (run embbeded version with IE8): http://jsfiddle.net/stevebeauge/K9EGv/24/embedded/result/
To reproduce the problem:
Start draging an element by clicking on the "hover" button.
very quickly, drop the item (even if the drag is not visually started) elsewhere in the list
still very quickly, move your mouse out of the table
The whole operation must be done under 1.5 second.
With this scenario, the initial dragged item is in the hover state, even if the mouse is no more on the button.
Is there a way to "force" refresh of the hover state?