I have a very specific scenario in my hands to solve. I'm using FastClick to overcome the old
~300ms delay on clicks on mobile.
The project is an old Cordova app, and FastClick basically listens to touch events to
programmatically create click events. But the issue comes with Vuetify Click Outside directive,
which exist to close multiple menus and components through the app, this directive chooses to
ignore click events that are not trusted (event.isTrusted) so basically my components don't close
when user clicks.
I have tried to transpile Vuetify locally as the last resort, which I'm struggling with.
Next is the link to the Vuetify Source Code on the version I'm using (2.1.18).
https://github.com/vuetifyjs/vuetify/blob/v2.2.18/packages/vuetify/src/directives/click-outside/index.ts#L35-L37
// Vuetify Source Code
// If click was triggered programmaticaly (domEl.click()) then
// it shouldn't be treated as click-outside
// Chrome/Firefox support isTrusted property
// IE/Edge support pointerType property (empty if not triggered
// by pointing device)
if (('isTrusted' in e && !e.isTrusted) ||
('pointerType' in e && !e.pointerType)
) return
If someone could tell me how to overwrite this behavior or any kind of solution, it would help me a lot.
Related
I'm trying to debug the integration between my app and Stripe's Elements component library. Everything works fine in sandbox mode, but we ran into a problem on production in the 3D Secure authentication process. This involves loading an iframe, into our app, that contains a form from the credit card's issuer (usually via a technology partner, like Arcot).
The form loads correctly and its buttons are working as expected, but the element (for a SMS one time code) is not behaving. Every time I click on the input, something is immediately pushing the focus back to the element of the iframe. This makes it impossible to type anything in, since by the time I touch a key, the input is not in focus. For reference, it is possible to change the input's value using document.getElementById('enterPIN').value = '123456';
I'm not sure if my app is triggering focus() calls (I don't think so) or if it is some part of the iframe code or even Stripe's. Is there a good way to monitor DOM events and do a stack trace for the trigger of each one?
I tried two tactics. Neither gave an obvious answer, but they did point my search in the right direction.
I opened the Event Listeners panel (in the Elements tab of my browser's developer tools) and removed everything I could find, but it seems that this doesn't actually change the behavior of the page- focus kept being stolen away. Luckily, I also noticed some listeners that were defined by the Material UI library.
I used monitorEvents() to get a few more details, but the src & target values were not much help and event.relatedTarget was always null.
In the end, I found this discussion and realized that my MUI Dialog component was stealing focus whenever I clicked on the iframe triggered by its content. This was easily fixed by adding the disableEnforceFocus attribute.
I am new to React and creating a calculator app with React-Redux to gain knowledge of the framework.
The app is working with the onClick event but some issues are there. I have created a sandbox for anyone to see.
https://stackblitz.com/edit/react-dezmon
While doing my Calculator app, I am facing 2 challenges.
onKeyDown not working. Basically I want the same functionality as it is happening in the onClick event (which is working fine).
After any operation (after clicking '='), when I click on any other digit, the previous state is not clearing. For eg, if I add 52 + 6, after clicking = when I click on any digit(2 for eg) it is picking as 62. It should clear basically.
Any help is very much appreciated.
You cannot use onKeyDown directly on your <Digits> because the event only fires when the element is currently focused and only 1 element can be focused at a time in a page.
What you need to do is to move your onKeyDown to the parent, and put this listener on the parent element.
Therefore the way you should handle the event is to parse which key on keyboard is being tapped, then run your operation based on that information.
See it here: https://stackblitz.com/edit/react-pmmntj
I've a simple list made of mat-card. I would like to highlight the mat-card when dragging a file over and do something on the file drop, but I have two main issues:
Sometimes, when dragging too fast, the status of the mat-card is not correctly updated. so in some cases I have multiple cards highligthed.
The e.preventDefault() on drop event does nothing. The file is open in the browser, which is not the expected behaviour.
I tried so many things, even manually add/remove event listeners, but nothing worked. Hope someone will help :)
Here you can find a demo made in stackblitz so it can be easier to debug:
https://stackblitz.com/edit/angular-material-with-angular-v5-d2uted
Update:
Using Angular v5 and Angular Material 2
After some poking around, the dragover event needs to be prevented as well as the drop event in order to stop the browser from opening the file. To fix the class being applied multiple times, I fixed this by using ngClass instead of the ngIf and it seems to work more consistently. Check out this stackblitz for a demo.
For the first issue, this is because of Angular lifecycle that isn't fast enough. Either you stop using Angular's context to update your elements, or you find another way of notifying the user that he is above the application.
For the second issue, add an host listener to the window:dragover event to prevent the default :
#HostListener('window:dragover', ['$event'])
windowDragOver(event: Event) {
event.preventDefault();
}
Stackblitz
I have an issue with interact.js 1.2.4 and iPad Retina iOS 8.1 Mobile Safari, which I need to resolve somehow. The problem occurs in a sorting component nested inside a large sequential learning web-application, where the user solves a succession of tasks. The interact.js plugin is used for adding drag/drop behavior so the user can sort elements in the correct order. The site is live, but the issue I'm about to describe is now persistent and reproducible, so it needs to be solved quick.
Here's the setup. We've initialised a number of draggable elements with
interact('.drag').draggable(...);
and we've registered onstart, onmove and onend listeners, which are handled manually with callback functions.
In most cases, the drag drop behavior acts as planned. But when using the sorting component in certain parts of the application sequence, the actionName of an interaction is inexplicably "gesture" instead of "drag", which makes the validateAction (interact.js) function return null instead of a valid action. This in turn causes the pointerDown (interact.js) handler to never get fired, so the drag motion is never initiated, and the element stays put forever, making it impossible to progress further in the sequence. The behavior only occurs on iPad.
If I run the site in an iPad simulator and inspect the element with Safari's developer tools crosshair functionality, something changes the element, and the next interaction's actionName suddenly becomes "drag", so the component starts to work as intended and the user can proceed in the sequence.
Do you have any idea as to:
What causes the website to relay a "gesture" action instead of a "drag" action?
What excactly happens when I use the inspection crosshair? Why does it change behavior?
How do I solve this issue?
You can see the component code here, but it's part of a major Backbone solution, so this is all I can include.
Thanks in advance.
We still don't know the cause, but seemingly there is a bug in iOS, which causes the application to fire 5 pointer events at once. Thus, the plugin registers the event as a gesture, and the drag drop functionality fails. The plugin creator gave this suggestion, which fixed the issue:
interact(document).on('down', function (event) {
var interaction = event.interaction;
var canGesture = interaction.target && interaction.target.options.gesture.enabled;
var maxAllowedPointers = canGesture? 2 : 1;
while (interaction.pointers.length > maxAllowedPointers) {
interaction.removePointer(interaction.pointers[0]);
}
})
I am building a third party plugin to the popular platform Atlassian JIRA and where I have implemented a calendar. However when I click on a day outside any event, it triggers a function which will trigger the #create_link event.
When that event gets fired a new modal window opens and the user may fill out a new issue. The thing is that I want to change the issuetype field and then fill in one field automatically. However, I have no idea how to generate a new window with these result (I don't think it's possible) and therefore my only option was Javascript events.
This is my code so far:
jQuery.when(AJS.$('#create_link').trigger('click')).done(function() {
jQuery.when(jQuery('#issuetype-field').trigger('click')).done(function() {
jQuery('.aui-list-item-li-event').find('a').trigger('click');
});
});
//I have also tried to use `.then`
The thing is, the triggers work when run separately in console but it seems like the jQuery.when doesn't. Because the next event triggers long before the window has been loaded.
What I need is a way to wait to trigger the last 2 events by using callbacks on the triggers or what not. How can I solve this problem? Also, if anyone know how to create a new issue window with js in Jira that is also a very acceptable answer.
Using Jira issue collector would make your task much simpler. You can configure it to receive feedback or bug reports etc.
https://confluence.atlassian.com/display/JIRA/Using+the+Issue+Collector
The integration of the issue collector is merely adding a script tag in your HTML page