I'm implementing a list of items that is scrollable and that the user can filter with a search field. When the user empties the field I want to scroll back to the position the user was at when they started the search. I'm using React with hooks but cannot get the element to scroll when the search field state changes. I was able to call the scroll function at other places in the code and it worked, but I don't understand why it doesn't work with the useEffect hook.
This is my useEffect that should run when the field is empty:
useEffect(() => {
if (!tableWrapperRef.current) {
return
}
if (!filterText) {
tableWrapperRef.current.scrollTo({ top: scrollPosition })
}
}, [tableWrapperRef, filterText])
Should I use something other than useEffect?
The solution was to add a setTimeout without any actual time value. For some reason scrolling inside a useEffect doesn't work without it.
Related
I used a grid display on the body with some control elements in column 1, and a fullpage view in the second column. The first column may contain a lot of elements and requires vertical scroll (overflow-x:auto).
I have an input element within the other elements in the grid column to which I assign flatpicker.
https://codepen.io/dbauszus-glx/pen/wvpamZr
flatpickr("#date-input", {
static: true,
//appendTo: "scroll-parent"
});
My issue is that without the static property the flatpickr control displays but doesn't scroll.
With the static property the flatpickr control scrolls together with the input element but the display overflows the parent container with scroll.
I'd like the control to show as seen without static but be linked to the input element when scrolled.
I tried to work with the appendTo property which doesn't seem to have any effect.
Trawling the flatpickr issues I found an issue related to the positioning of the flatpickr instance inside a scrollparent.
I put together a small util method which takes the flatpickr instance and a scrollParent element and attached a scroll event listener to the parent when the flatpickr instance opens.
The scroll event method will reposition the absolute flatpickr container.
The onClose event will remove the scroll eventlistener from the scrollParent element.
function appendFlatpickrToScroll(fp, scrollParent) {
fp.config.onOpen.push(() => {
scrollParent.addEventListener("scroll", scrollEvent, { passive: true });
});
fp.config.onClose.push(() => {
scrollParent.removeEventListener("scroll", scrollEvent);
});
function scrollEvent() {
fp._positionCalendar();
}
}
So I've a custom widget which renders a custom component.
conversion.for('editingDowncast').elementToElement({
model: 'modelName',
view: (modelElement, viewWriter) => {
const modelName = modelElement.getAttribute('modelName');
const modelNameView = viewWriter.createContainerElement('span', {
class: 'modelName',
'data-modelName': modelName,
});
const reactWrapper = viewWriter.createUIElement(
'span',
{
class: 'modelName__react-wrapper',
},
function (this, domDocument) {
const domElement = this.toDomElement(domDocument);
rendermodelName(modelName, domElement);
return domElement;
},
);
viewWriter.insert(
viewWriter.createPositionAt(modelNameView, 0),
reactWrapper,
);
return toWidgetEditable(modelNameView, viewWriter);
},
});
Where rendermodelName will give back a React component with a simple input box as
return (
<div>
<input type="text" />
</div>
);
https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html.
But the problem is, whenever I tried to add some content inside the input, the focus is lost from the field and automatically moved to the surrounding editor. What am I missing. Tried creating a focushandler and adding the modelNameView to it.
Should I go with the new createRawElement? My current CK5 is 20.0.0 So I don't want any breaking changes coming now.
EDIT:
I researched a little bit more. seems like createRawElement may not work here. I think this doesn't have a simple solution. I tried with allowContentOf: '$block' which also not letting me focus. But these values are explicitly for normal CK widget, not for a react component.
I had the same issue and solved it by adding this tag to the parent div that wraps my Vue component.
https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/ui/widget-internals.html#exclude-dom-events-from-default-handlers
Adding from CKE Docs:
Sometimes it can be useful to prevent processing of events by default handlers, for example using React component inside an UIElement in the widget where, by default, widget itself wants to control everything. To make it possible the only thing to do is to add a data-cke-ignore-events attribute to an element or to its ancestor and then all events triggered by any of children from that element will be ignored in default handlers.
Let’s see it in an short example:
<div data-cke-ignore-events="true">
<button>Click!</button>
</div>
In the above template events dispatched from the button, which is placed inside containing data-cke-ignore-events attribute, will be ignored by default event handlers.
I faced the similar issue.
CKEditor will takes all the events on React component which you hosted on Widget.
The work around is to stop propagation of events to CKEditor which are fired from your DOM element(domElement) where your React component hosted.
Here is the sample code:
https://github.com/ckeditor/ckeditor5-core/compare/proto/input-widget#diff-44ca1561ce575490eac0d660407d5144R239
You should stop all required events. Also you can't paste any content inside the input field of React component. That will also listened by clipboardInput event of CKEditor.
I'm having issue getting the React Fabric UI DetailsList to work with React Hooks. It renders, but the selection part does not. Whenever, you select a row, I expect the count of the selection to be updated. However, i'm not seeing that. It looks like the selection component items never get updated even thou the UI shows it being selected. I'm also seeing the onSelectionChange being triggered when you select a row. Now sure if its because i'm using react hooks or what
I took the provided class example which works:
[Codepen]https://codepen.io/pen/?&editable=true (Example)
Same as the original but stripped down
[Codepen]https://codepen.io/darewreckk/pen/NQRWEd?editors=1111
converted it to a react hook component. I would expect the same thing, but i'm not and can't figure out what's different.
Modified Example with Hooks
[Codepen]https://codepen.io/darewreckk/pen/GVjRNb?editors=1111
Any advice appreciated,
Thanks,
Derek
The selection count is stored on the Selection object that you are creating. You could log it out like so:
const _selection = new Selection({
onSelectionChanged: () => {
console.log('Selected count:' + _selection.count);
}
});
You can set the value of selectionCount and selectionDetails whenever onSelectionChanged is called:
const _selection = new Selection({
onSelectionChanged: () => {
setSelectionCount(_selection.count);
setSelectionDetails(`${_selection.count} items selected`)
}
});
As a side note: If you want selectionDetails to update when selectionCount updates, you can use the useEffect hook:
React.useEffect(() => {
setSelectionDetails(`${selectionCount} items selected`);
}, [selectionCount]);
The above effect will run whenever selectionCount updates, and so in turn update selectionDetails.
How can I get notified on a CKEditor 5 model, View and widget's click, update and delete events?
Let's assume that I have a custom plugin implementation similar to a link plugin or highlighter plugin. Now, how can I get the following events?
When user clicks on the link/highlighted element.
When user updates the inner content of the highlighted element.
When user removes the entire highlighted link or highlighter element from editor.
The element can be a model element/view element/or a widget.
Here is the code I use. It need to be in the init() method for a plugin. I don't know if this is the correct way to do it, but it works for me(tm).
const editor = this.editor;
const model=editor.model;
const editingView=editor.editing.view;
editingView.addObserver( ClickObserver );
const viewDocument = editor.editing.view.document;
this.listenTo( viewDocument, 'click', (event,data) => {
const target=data.target; // This is the view the user clicked on
const modelObj=editor.editing.mapper.toModelElement(target);
// modelObj is the model object for the element the user clicked on. Now you just need to test if clicking on this model is something you are interested in.
// console.log(modelObj);
} );
Note that this does seem to fail if you click on a AttributeElement (Such as bold text). In that case you can either call on the target.parent until you get a result.
As the title says. I want to make a list of div elements inside a div. I want to be able to scroll the list up and down, and when the list is not scrolling anymore, i want to be able to click the listed elements do to something. I cant figure out how to do this.
the touchmove event executes whenever the user touches the div, even if the div its scrolling. THen i cant figure out how to make let the program know that the div isnt scrolling anymore, so the next touch on the elements will trigger a non scrollable event.....
EDIT:
what i have so far is this... However this is a quick "fix" and its not working as intended. For example if you scroll quickly up and down, then the div will think you pressed on one of the elements..
exerciseWrapper is the elements inside the scrolling div. Each element is wrapped around exerciseWrapper.
$('.exerciseWrapper').on('touchstart',function(){
touchstart=true;
setTimeout(function(){
touchstart=false;
}, 100);
});
$('.exerciseWrapper').on('touchend',function(){
if(touchstart)
{
$('.exerciseWrapper').not(this).css('border-color','black');
$(this).css('border-color','orange');
}
});
Ok so i finally figured this one out.. Reason why i couldnt wrap my minds around the solution on this, was because i couldnt get other events then eventstart and event end to work... At the time of writing i still cant get the other events like eventcancel and eventleave to work. However eventmove works and i solved the problem using this event. eventmove keeps updating the element its linked when you move your finger. Then i had a variable of touchmove to constantly be true if i am scrolling my div (with touchmove event). WHen i stop moving i can clik on selected element again and use a normal eventstart event.. This is my working code:
var touchmove=false;
function AddExercisesEvents()
{
$('#exerciseMenu').on('touchmove',function(){
touchstart=true;
$('h1').text("move");
});
$('.exerciseWrapper').on('touchend mouseup',function(event){
event.stopPropagation();
event.preventDefault();
// $('.exerciseWrapper').off();
if(event.handled !== true)
{
touchstart=false;
//ENTERING editExercise Menu..!
if(!touchstart)
{
//insert magic here
alert($(this).attr('id'));
}
}
return false;
});
}