I am trying to clear PnP People piker control programmatically in SharePoint online spfx webpart, I am using a simple form with save and cancel button, which save data in List, on the Cancel button I want to clear PeoplePicker value
<PeoplePicker
context={this.props.context}
personSelectionLimit={1}
groupName=""
showtooltip={false}
onChange={(value) => this.getPeoplePickerItems(value, "col")}
showHiddenInUI={false}
defaultSelectedUsers={this.state.ApprovarSelected}
principalTypes={[PrincipalType.User]}
ensureUser={true}
/>
OnChange Event
private getPeoplePickerItems(items: any[], col) {
if (items.length > 0) {
this.state.ListItem.Approvar = { id: items[0].id, secondaryText: items[0].secondaryText, text: items[0].text };
}
else {
this.state.ListItem.Approvar = { id: '', secondaryText: '', text: '' };
}
}
Cancel button
public onClickCancel() {
this.setState({ ApprovarSelected:[]});
}
I am changing state while clicking on the Cancel button, but somehow it is not working, can anyone help me with this?
Thanks.
I got the solution,
Add ref={c => { this.ppl = c }} in PeoplePicker control and write below code on cancel button.
this.ppl.onChange([]);
It works for me.
I have an element in my HTML and it has some HTML inside it. I am converting that to noUISlider at the click of a button (Start Slider). There is another button to hide the slider (Hide Slider). I want to hide the slider but keep the and also the HTML inside it. I am trying the slider.nouislider.destroy(); but it deletes the element completely.
Any help on this is appreciated.
Thank you.
Suhas
Okay, this is what I did and it worked for me. Hopefully, it could be helpful to someone or if there is a better way to do this, please let me know.
My HTML is
<div class="sliderContainer" id="slider">some HTML code</div>
And My JS code is
var sliderActive = false;
function createSlider() {
if (!sliderActive) {
sliderActive = true;
noUiSlider.create(slider, {
start: [360, 1080],
connect: true,
step: 15,
behaviour: 'drag',
tooltips: [
{
to: function (value) {
return processValue(value);
},
from: function (value) {
return processValue(value);
}
},
{
to: function (value) {
return processValue(value);
},
from: function (value) {
return processValue(value);
}
},
],
range: {
'min': 0,
'max': 1440,
}
});
}
}
function destroySlider() {
sliderActive = false;
$('.sliderContainer').attr('class', 'sliderContainer');
$('.noUi-base').remove();
delete slider.noUiSlider;
slider = document.getElementById('slider');
}
Thank you.
I have a topBar with a button that toggles the Side Menu.
I have registered a navigationButtonPressed action as below
navigationButtonPressed({ buttonId }) {
switch (buttonId) {
case 'sideMenuButtonId':
Navigation.mergeOptions(this.props.componentId, {
sideMenu: {
left: {
visible: true
}
}
});
break
default:
break
}
}
But in this case, the button only makes the sideMenu visible, and Im trying to use it so it toggles the menu open and closed.
So i replaced the above with a variable approach seen below..
var sideMenuVisible = false
navigationButtonPressed({ buttonId }) {
switch (buttonId) {
case 'sideMenuButtonId':
sideMenuVisible = !sideMenuVisible
Navigation.mergeOptions(this.props.componentId, {
sideMenu: {
left: {
visible: sideMenuVisible
}
}
});
break
default:
break
}
}
Which works fine if the user only uses the button to open and closed the sideMenu, but the user can also open/close the menu by swiping to open the menu as well as tapping out the menu to close it.
Is there a way to check the visibility of the sideMenu so I can properly use an action to open/close the menu on command?
It can done much more simple.
Think you should create it as a state, because the component have to know, it should be rerendered, when the state change.
So something like
state = { isOpen: false };
toggleSidebar = () => {
this.setState({ isOpen: !isOpen })
}
And now, you should call the toggleSidebar function when you click the button
I am trying to implement Add Application (portlet) feature in popup and instead not use Dockbar + Add application feature, So I referred add_application.jsp and created similar jsp which I am calling via aui popup, for now I am just displaying a particular portlet cateogry say Wiki.
But there seems to be some AUI issue while using following script,
Please guide me through what am I missing here.
<aui:script use="liferay-dockbar-add-application,liferay-dockbar-portlet-dd">
var searchApplication = A.one('#<portlet:namespace />searchApplication');
var addApplication = new Liferay.Dockbar.AddApplication(
{
focusItem: searchApplication,
inputNode: searchApplication,
namespace: '<portlet:namespace />',
nodeList: A.one('#<portlet:namespace />applicationList'),
nodeSelector: '.drag-content-item',
selected: !A.one('#<portlet:namespace />addApplicationForm').ancestor().hasClass('hide')
}
);
addApplication.plug(
Liferay.Dockbar.PortletDragDrop,
{
on: {
dragEnd: function(event) {
addApplication.addPortlet(
event.portletNode,
{
item: event.appendNode
}
);
}
},
srcNode: '#<portlet:namespace />applicationList'
}
);
</aui:script>
I am using select2 plugin inside a jquery dialog but in does not work. When dropping down, the focus moves to the input control but immediately get out from it,not allowing me to type anything.
This is the HTML:
<div id="asignar_servicio" title="Asignar servicios a usuarios">
<input type="hidden" class="bigdrop" id="a_per_id" />
</div>
And this is the javascript code:
$( "#asignar_servicio" ).dialog({
autoOpen: false,
height: 500,
width: 450,
modal: true,
buttons: {
"Cancelar": function () {
$('#asignar_servicio').dialog('close');
}
}
});
$("#a_per_id").select2({
placeholder: "Busque un funcionario",
width: 400,
minimumInputLength: 4,
ajax: {
url: "#Url.Action("Search", "Personal")",
dataType: 'json',
data: function (term, page) {
return {
q: term,
page_limit: 10,
};
},
results: function (data, page) {
return { results: data.results };
}
}
}).on("change", function (e) {
var texto = $('lista_personal_text').val().replace(/ /g, '');
if (texto != '')
texto += ',';
texto += e.added.text;
var ids = $('lista_personal_id').val().replace(/ /g, '');
if (ids != '')
ids += ',';
ids += e.added.id;
});
I have this same code in other page and it works.
Any help will be appreciated,
thanks
Jaime
jstuardo's link is good, but there's a lot to sift through on that page. Here's the code you need:
$.ui.dialog.prototype._allowInteraction = function(e) {
return !!$(e.target).closest('.ui-dialog, .ui-datepicker, .select2-drop').length;
};
Just add it next to wherever you are setting the select2 drop down.
An easy way:
$.ui.dialog.prototype._allowInteraction = function (e) {
return true;
};
add this after whereever you set select2
Or try this from:
Select2 doesn't work when embedded in a bootstrap modal
Remove tabindex="-1" from the modal div
I have found this workaround. https://github.com/ivaynberg/select2/issues/1246
Cheers
Jame
There's a new version of the fix for select2 4.0 from the github issue thread about this problem:
if ($.ui && $.ui.dialog && $.ui.dialog.prototype._allowInteraction) {
var ui_dialog_interaction = $.ui.dialog.prototype._allowInteraction;
$.ui.dialog.prototype._allowInteraction = function(e) {
if ($(e.target).closest('.select2-dropdown').length) return true;
return ui_dialog_interaction.apply(this, arguments);
};
}
Just run this before any modal dialogs that will have select2 in them are created.
JSFiddle of this fix in action
The best solution I found was just making the dialog not be a modal dialog by removing modal:true. Once you do this the page will function as desired.
After a while of battling with this I found another option that allows you to keep the dialog as a modal. If you modify the css for select2 to something like the following:
.select2-drop {
z-index: 1013;
}
.select2-results {
z-index: 999;
}
.select2-result {
z-index: 1010;
}
keep in mind that this works however if you open a lot of dialogs on the same page it will eventually exceed the z-index specified, however in my use case these numbers got the job done.
Not enough reputation to comment on a previous post, but I wanted to add this bit of code:
$('#dialogDiv').dialog({
title: "Create Dialog",
height: 410,
width: 530,
resizable: false,
draggable: false,
closeOnEscape: false,
//in order for select2 search to work "modal: true" cannot be present.
//modal: true,
position: "center",
open: function () { },
close: function () { $(this).dialog("distroy").remove(); }
});
$("#displaySelectTwo")select2();
Updating to the newer version of JQuery and Select2 is not an option in our application at this time. (using JQueryUI v1.8 and Select2 v1)
Add this after your select2() declaration.
$.ui.dialog.prototype._allowInteraction = function (e) {
return !!$(e.target).closest('.ui-dialog, .ui-datepicker, .select2-dropdown').length;
};
I've used the following fix with success:
$.fn.modal.Constructor.prototype.enforceFocus = function () {
var that = this;
$(document).on('focusin.modal', function (e) {
if ($(e.target).hasClass('select2-input')) {
return true;
}
if (that.$element[0] !== e.target && !that.$element.has(e.target).length) {
that.$element.focus();
}
});
}
I could fix this by removing the option: 'modal: true' from the dialog options.
It worked fine.
For anyone stumpling upon this with Select2 v4.0.12
I was using the Select2 option dropdownParent
i set the dropDownParent value, and still had the issue.
dropdownParent: $("#ReportFilterDialog")
What fixed it for me, was setting the value to, to select the outer layer of the modal dialog:
dropdownParent: $("#ReportFilterDialog").parent()