I'm using React-Hook-Form together with Material-UI (MUI). The isDirty flag just works fine, except when I have a Autocomplete component in my form.
I dont need to modify the autocomplete itself, it just need to be present. Then the bug is following:
I change an input and revert the change so that isDirty should be false again. In reality isDirty is still true, even the dirtyFields object is empty in the case (when i expect isDirty to be false);
Related
I am working on a chrome extension that lets users pre-configure action sequences.
I noticed that document.execCommand('undo') doesn't work in TinyMCE.
However tinyMCE.execCommand('undo') works fine.
Is there a way to make document.execCommand('undo') work directly in TinyMCE?
Any text or images or other items added to the editor creates an event in the separate, TinyMCE DOM. This is why document.exeCommand('undo'); won't affect added content and returns 'false' in the console.
To see this in action, I contrasted TinyMCE with a standard textarea and content editable section, and tried out the commands in the console: the document.execCommand returns 'true' when run in the console for undoing content in the textarea and contenteditable. But it does return 'false' for TinyMCE.
(As for a way to make document.execCommand run in TinyMCE, I'm not sure it is possible.)
I have a document editor that has an edit and readonly mode. The readonly mode is a static renderer that just uses HTML/CSS and the edit mode initializes a tinyMCE edtior. However I'm adding a track changes plugin that requires tinyMCE to be active in readonly and edit mode. My plan is to have tinyMCE active at all times but modify the toggle to switch between a readonly and edit state. The native tinyMCE methods for this don't seem to satisfy what I'm trying to do so this is my plan:
I used editor.setMode('readonly') and it makes the toolbar inaccessible but still visible and the document itself is still editable. Setting via DOM manipulation contenteditable="false" makes the document uneditable but it seems hacky, is there an editor method that would do this for me?
I can also just hide the toolbar using DOM manipulations but it also seemed hacky so I'm asking if there is a way to do this through some editor method without actually turning off any of the active plugins at the time?
You can disable the toolbar by setting the toolbar value in the configuration to false.
https://www.tiny.cloud/docs/configure/editor-appearance/#disablingthetoolbar
For example:
tinymce.init({
selector: "#theEditor",
toolbar: false,
...
});
I have multiple fields including text,checkbok box, drop-down etc in jsf form, which is showing values from DB.I would like the submit button to be disabled by default and to only be clickable if the user made changes to any of the fields in the form. Please help !!
For a simple form you can use this jQuery plugin that a user mentioned here.
Edit:
The plugin is quite simple to use, and powerful, because for example you will have your buttons disabled again if you revert changes inside an input field.
Just make sure that you include the js file:
<h:outputScript name="path/jquery.are-you-sure.js"/>
And for using it, you have to add the line:
$('#idofyourform').areYouSure();
After that, for enabling and disabling submit buttons you have to add:
//All disabled by default
$('#idofyourform').find('button[type="submit"]').attr('disabled', 'disabled');
//Enabled all when there are changes
$('#idofyourform').bind('dirty.areYouSure', function () {
$(this).find('button[type="submit"]').removeAttr('disabled');
});
//Disable all when there aren't changes
$('#idofyourform').bind('clean.areYouSure', function () {
$(this).find('button[type="submit"]').attr('disabled', 'disabled');
});
Both codes inside your document ready function.
Note that I used button[type="submit"], which is what p:commandButton renders by default. You can use input if it's your case.
NOTE: This plugin also adds an extra functionality the OP didn't ask for (the dialog check when you navigate without saving changes). You can disable this if you want by doing:
$('#idofyourform').areYouSure( {'silent':true} );
Not tested, but I would simply use something like this :
$(document).ready(function() {
$('#formId input[type="submit"]').attr('disabled','disabled');
$('#formId').change(function(){ $('#formId input[type="submit"]').removeAttr('disabled'); });
});
If you don't use any jQuery functions already in the view (any PrimeFaces ajax buttons for example), you might need to add :
<h:outputScript library="primefaces" name="jquery/jquery.js" />
I need help with some things regarding windows form validation:
closing form using standard form closing button (X) triggers validation of all controls.
Is there a way to supress it when closing form using this button, and force it only when pressing my own button?
validation of textbox (possibly other controls, I tested only textboxes) wont invoke when i change text (value) programatically. I need to type text directly into textbox if I want validation to be triggered later, before form is closed. How to tell the form that some control needs validation (but not to trigger it immedidately)?
Thanks.
EDIT:
(1) solved, using this answer.
(2) now, after i set AutoValidate property to false and added ValidateChildren() to my button, only 1 control is being validated with its current value, values of all other controls are revert to value binded to them from DataSource object . I checked it in Validating event - only first control validating keeps its current value, after this validation is finished, other controls' values are replaced with values from DataSource object. I don't understand why. Any clues?
Try this, maybe it could help you. ( for 1)
In the Forms Load event you can put
this.ControlBox = false;. This will hide your X button with the other buttons at the top.
The Form has a Form1_FormClosing event. In that Event you could call the triggers you need. Put a button on the form, and in button_Click event you type this.Close().
I have an Ext Js panel that I am adding to my main TabPanel. The panel I am adding contains a FormPanel as one of it's items and inside the FormPanel I have a Name field. What I want to do is change the name of the Tab based on the name in the form field.
The problem is that if I call the FormPanel's getForm().getValues() inside of the panel's initComponent, I get the following javascript error:
Uncaught TypeError: Cannot read property 'dom' of undefined
If I do this outside of initComponent (e.g. on a button press) everything works fine. After doing some testing, I think the issue is that the FormPanel isn't actually rendered yet (and thus the dom doesn't exist), getValues() fails. However, I can't seem to figure out a way to get my FormPanel's values from the Panel on load.
I tried to listen for events. I tried:
this.detailForm.on('afterrender', function () { alert('test'); });
but doing this showed that AfterRender is called prior to the form actually being rendered (it's not visible on the screen). Changing the alert to my custom function handler produces the previous dom exception. I attempted to use the activate and enable events instead of afterrender, but even though the API says that FormPanel fires those events, the alert('test') never gets called.
I can't seem to find any way for my panel to get the inner FormPanel's values upon loading my panel. Does anyone have any ideas?
Using getFieldValues() in place of getValues() will collect values by calling each field instance's getValue() method instead of by reading from the DOM. This should allow you to get your values regardless of the form's rendered state.
I've got the same problems on one of my projects, I managed to fix it using the afterlayout event.
I'd give setting .deferredRender:false a try.
Ext.TabPanel.deferredRender
Probably best to roll out of your afterlayout changes, then test with just a straight deferredRender:false config item.
I believe the problem is caused because the inactive tabs are not rendered until they become active. In your scenario, you cannot get the values, because they don't exist until the tab is activated/shown.
Setting deferredRender:false will render the items within all tabs. There could be a performance hit by setting deferredRender:false, so testing you must do.
Hope this helps.