I've looked at Reuse Quasar Dialog plugin with custom component on another component that does not have any answers and I have close to the same question but I have structured code a bit different. On my parent form I have
<q-dialog prevent-close v-model="showProfileForm" class="profileDialog">
<profile-dialog></profile-dialog>
</q-dialog>
and my profile-dialog is a form that is a simple template
<template>
<q-stepper
It seems that if I wrap the component on the parent page the dialog will open BUT I cannot pass in
prevent-close
or add a
#hide
I need to know when the dialog form is closed to save changes or prevent closing unless a button is clicked. Even adding the prevent-close in the parent does not work
<q-dialog prevent-close v-model="showProfileForm" class="profileDialog">
<profile-dialog></profile-dialog>
</q-dialog>
If I create the form inside a q-dialog, so it becomes a dialog inside a dialog and set the v-modal to true when it closes the parent form still has the slight gray overlay until the page is clicked and the form will not open a second time
You can use the emit event in profile dialog for pass event so that you know that form is submitted or not and use persistent so that User cannot dismiss Dialog if clicking outside of it or hitting ESC key; Also, an app route change won't dismiss it.
<q-btn v-if="step == 4" #click="FinishClick" color="primary" label="Finish"/>
methods: {
FinishClick() {
alert("Finish Click From Profile Dialog");
this.$emit("profile_dialog_emmit",{'MSG':'TestData'})
}
}
<profile-dialog #profile_dialog_emmit="my_fun($event)"></profile-dialog>
In Parent Component.
methods:{
my_fun(data){
console.log("Assad");
alert("From Index Check Console for Data");
console.log(data)
this.showProfileForm=false;
}
}
Demo - https://codesandbox.io/s/clever-kilby-qf1gz
Go to the final step and click on finish will trigger the event and you can see an alert from the parent component and check the console for data displayed from the parent component.
Related
I have the following problem, in my web site build with nextJS and ReactJS with typescript I have products that are loaded when a button is clicked, when I click the button the items appeared and the button is scrolled down, which is the asked behavior, but when I scroll to the bottom of the page and I try to click the button the scroll remains on the same position and the items are loaded but cannot be seen, my logic is to use onFocus on the current button and when I click it to change the scroll to him, that will solve the problem when the user has scrolled down to the bottom of the page, that way it will not remain on the bottom but rather it will automatically scroll up to the button and will see the new items loaded.
The problem is that the logic to load the products are in a different component in which I am reusing the current button and right prop I am sending function to the onClick on the button. My question is how can I use onFocus. Does it has to be in the child component inside the function or in the button component. I tried to make it work on the Button component, but it doesn't work. So I am stuck for the last 4 hours and I really need a push. I would be glad if you could shine some enlargement
Here I will enter the function in the parent component for the onClick prop :
const handleLoadMoreProducts = () => {
if (!isSearchPage) {
const mappedBreadcrumbs: string[] = categoryData.breadcrumbs.map(
(crumb: BreadCrumItem) => crumb.name
);
gtmBreadcrumbTrack(mappedBreadcrumbs);
}
<LoadMoreProducts handleLoadMoreProducts={handleLoadMoreProducts} />
And here is the component that uses the Button:
interface LoadMoreProductsProps {
handleLoadMoreProducts?: (MouseEvent: React.MouseEvent<HTMLButtonElement>) => void;
Focus?: (MouseEvent: React.MouseEvent<HTMLButtonElement>) => void;
}
const LoadMoreProducts: FC<LoadMoreProductsProps> = ({ handleLoadMoreProducts }) => (
<div className="LoadMoreProducts">
<Button type="button" importance="ghost" onClick={handleLoadMoreProducts}>
Load more products
</Button>
</div>
);
I think what you want to do is to forward the ref of the element you are trying to focus in the Button component using React.forwardRef and combine it with the useImperativeHandle hook in order to gain the ability to trigger the focus with the ref outside of the Button component.
You could create a ref for the element you are trying to focus and call the focus() function for the ref on click.
More information regarding forwarding refs and the useImperativeHandle hook.
we are using react and ant design as the frontend tech. One thing I noticed in the ant design modal. When we put onCancel attr in the modal like the code below. This will allow us can close the modal by clicking the 'X' in the right corner but it will also allow closing modal by clicking anywhere outside the model. Is there a way to prevent this outside click action while keeping the 'X' action ? Thanks in advance
<Modal
visible={visible}
title="My modal"
onOk={handleOk}
onCancel={closeMyModal}
className='myModal'
>
add
maskClosable = {false}
to prevent closing the modal dialog when the mask (area outside the modal) is clicked
<Modal
visible={visible}
title="My modal"
onOk={handleOk}
onCancel={closeMyModal}
className='myModal'
maskClosable={false}
>
You need to set property maskClosable by false to prevent it
According to Antd's documentation, you have two solutions:
If you use the <Modal> in your component, you'd to set maskClosable={false}. This prevents you from viewing the modal when you press outside the modal area.
You can check Modal.confirm() as follows:
https://ant.design/components/modal/#components-modal-demo-confirm
I have an Angular (10) Material checkbox with a link in the label that has a click handler to open a dialog with reference info:
<mat-checkbox formControlName="certification">
By checking this box, I certify that all shipment information provided is correct and I agree to adhere to the
<span class="fake-link" (click)="openUspsPrivacyAgreement($event)"> USPS Privacy Act Statement </span> and all
other country-specific requirements.
</mat-checkbox>
My click handler is
openUspsPrivacyAgreement(event: MouseEvent) {
this.dialogService.open(DialogUspsPrivacyAgreementComponent);
event.preventDefault();
event.stopPropagation();
}
It works in that the dialog opens and the checkbox is not selected, which is what I want.
However, the ripple fires on the checkbox anyway. Is there a way to prevent the ripple when I click on my text but have it work when the checkbox is clicked?
I thought what I did was enough, as it does prevent the click from getting to the checkbox and checking it.
It looks like mat-checkbox ignores internal element stopPropagation. So, you could create an workaround where you add dynamic variable isRippleDisabled as boolean flag to your checkbox
<mat-checkbox formControlName="certification" [disableRipple]="isRippleDisabled">
and switch it off (true) when modal open, and back to normal, when modal close (false).
openUspsPrivacyAgreement(event: MouseEvent) {
this.isRippleDisabled = true; // set to false when dialog close
this.dialogService.open(DialogUspsPrivacyAgreementComponent);
event.preventDefault();
event.stopPropagation();
return false;
}
Add
<mat-checkbox>Checked 1</mat-checkbox>
to the app.component in the source code and it still has 'hover' effect, it could be disabled it through CSS.
The fix would be:
.mat-ripple { display: none; }
or .mat-checkbox-ripple only for checkbox
Let's say I have a collection containing 3 elements.
Each element has a corresponding remove button that I would like to initiate a POST to my server. Right now I have it setup so that when "Remove" button is pressed, a confirmation modal pops up with "yes" and "no" buttons. I am using the same modal for each element.
Problem is, when I click "yes" in modal, how can I have it know which remove button I clicked that launched the modal?
Here is a link to a gist containing the problematic code
https://gist.github.com/anonymous/85481507a1171467cae5
I have tried using a suggestion below that implements the following:
$('#hingle_dingle_0').on('click', function(e){
$('#confirmRemoveNetwork').modal('toggle', $(this));
});
$('#confirmRemoveNetwork').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
console.log(button);
});
However this returns an empty set. I can't for goodness sake figure out why it doesn't find the event.
Thanks for any help!
The modal is autoposting because you are opening it with a <button> inside a form with an input. Unless you tell it not to, this will cause a form submit. Simply set the type to button (instead of submit which is default): <button type="button">
You can capture the calling button by tapping into the event thrown when the modal is opened:
$('#confirmRemoveNetwork').on('shown.bs.modal', function (e) {
console.log(e.relatedTarget.id);
});
Finally, be sure your IDs are unique. You cannot have both "remove network" buttons using the same id of removenetworkbtn.
I have modal popup with an overlay written in html / js, everything works fine but if a user tabs enough they can get to the underlying form fields / buttons. Is there any good way of preventing this?
This is a rough idea but I'm hoping to inspire ideas rather than tell you exactly how to do it. I'll use a combination of pseudocode and pseudo-jquery-code:
function showMymodaldExample() {
//Show modal dialog (mymodal) code goes here
//
//Then we bind an event
$(document).bind('mymodal.keydown', function(e) {
if ( currently focussed element is not a child of mymodal ) {
set the focus previous element
}
});
}
And then remember to unbind mymodal.keydown when you destroy/hide the dialog