I'm using a ListView control from #pnp/spfx-controls-react library version 2.5.0
There is a documented property called defaultSelection which is:
The index of the items to be select by default
I'm trying to use it like this to autoselect the first row of the table:
<ListView
items={this.state.items}
viewFields={this._viewFields}
selectionMode={SelectionMode.single}
selection={this._updateSelectedItems}
defaultSelection={[0]}
/>
But when the page loads it never selects anything. Also no errors in the console.
I've also used a bare example found here: https://github.com/RaspeR87/sp-dev-fx-webparts/tree/master/spfx-react-controls/ListView to try it on a simple project but again it never selects anything.
Did anyone manage to make use of this property? Every input appreciated.
Here is a hack to solve the problem:
// Add a useRef to your ListView control
const refListView = useRef<any>(null);
// Set selection on load
useEffect(() => {
// Set mySelection as default selection
const mySelection = [1,4,6];
mySelection.forEach(i => {
setTimeout(() => {
refDocs.current._selection.setIndexSelected(i, true, false);
}, 0);
});
}, []);
// ListView control
<ListView ref={refListView }...
Yes, I have the same test result as yours. You may post this issue in the PNP react control Github repository.https://github.com/pnp/sp-dev-fx-controls-react/issues
Related
When using the React scroll library available here https://www.npmjs.com/package/react-scroll, there is a strange behaviour which introduces potential bugs and for which I haven't find a plausible solution yet.
Here is the complete code for reproducing the bug, I will explain it briefly just below the code sample.
import { Element } from 'react-scroll'
function App() {
const [data, setData] = useState([])
useEffect(() => {
setData([
{'id': 1, 'name': 'JavaScript'},
{'id': 2, 'name': 'jQuery'}
])
}, [])
return (
<div className="App">
{
data && data.map(item =>
<Element id={item.name} name={item.name} key={item.id}>{item.name} {item.name}</Element>)
}
</div>
);
}
It is pretty clean code. I have data state variable consisting of an array of objects which I want to iterate over and print each object's name property inside a div. Instead of div, I am using the <Element/> tag which is imported from the react-scroll package so that I can have a scroll spy functionality in the menu which will show the active section as the user scrolls through the page.
Now the issue is that whatever I put in the id attribute of this Element tag, gets binded to the window object. So in this case, window.JavaScript will be binded to the concrete DOM element containing the text JavaScript, and window.jQuery will be binded to the DOM element containing the text jQuery. Here are screenshots from the JavaScript console:
And if I click any of these logs, it takes me, clearly, to the respective DOM element:
This is how I actually found the bug, after binding jQuery to the window object, the imported jQuery library stopped working (don't ask why I use jQuery with React :D). The solution that is working so far is changing id={item.name} to id={item.id} so binding a number to the window object, but still, I wanna know if there is a reason each name is bound to window and whether that can be disabled.
I have some dynamic fields, which gets removed/added on the basis of some hook state. I have fields which gets removed from the list but the errors for them are still visible. I have tried to clearErrors, unregister to remove it but nothing works.
is it possible? reset does work but it resets the whole form too.
I am using v6 of react-hook-form and i cannot upgrade it to 7. That's out of the picture for now.
yup validator is being used with it for validations.
I stuck into the same problem seems like bug, if you try unregister the control it doesn't do it. Here how I have done.
When you remove the control do unregister and reset specific control.
const handleRemoveRow = (control) => {
//all code logic and stuff
//................
unregister(control);
reset({ [control]: undefined });
};
After that on useEffect hook assume you have one main state of form, reassign the values back.
useEffect(() => {
const keyValue = getValues();
keyValues.map(({controlName,Value}) => {
setValue(controlName, Value);
});
}, [getValues()]);
This is a more of pseudo-code but I hope you got the concept.
i have some problems, i am using devextreme(Tagbox) dropdown, i have a list of my grid and filtered very well. but when i am refreshing the page filter is gone(the grid behavior seems like selectall from to my db) i am research on stack overflow this issue, some people says use localstorage, and i did it, but couldn't find any solutions i don't know whats the best way doing that,
i did selected target value and then pass to data my state, after that i don't know what will i do right now.. Thank you!
this my code;
<TagBox
dataSource={this.getRegions}
displayExpr="name"
valueExpr="id"
onValueChanged={this.onRegionChanged}
/>
onRegionChanged = (e) => {
LS._setItem("FilterRegion", e.value);
const FilteredRegion = LS._getItem("FilterRegion");
this.setState((prevState) => ({
...prevState.FilteredRegion,
FilterRegion: FilteredRegion,
}));
console.log(this.state.FilterRegion);
I was working on a electron-react project for epub file. Right now, I am planning to make the app capable of selecting text field and highlight it.
To achieve it, I was trying to use web's Window.getSelection api. However, there are some really weird things come up like in this.
In short, I am unable to capture the Selection object. It seems like even if I log the Selection object, this object could somehow jump to something else. Also, I cannot even serialize the Selection object with JSON.stringfy. This is super surprising, and this is my first time seeing something like this (I will get empty object to stringfy the Selection object).
So how to use Window.getSelection properly under react-electron environment? Or this api will not work well for text content which is generated by react's dangerouslySetInnerHTML?
Looks like the window.getSelection api needs to toString the selected object.
const getSelectionHandler = () => {
const selection = window.getSelection();
console.log("Got selection", selection.toString());
};
Super simple textarea and button to get selection react demo
this solution might help someone, catch last selection
const selection = useRef('');
const handleSelection = () => {
const text = document.getSelection().toString();
if (text) {
selection.current = text;
}
}
useEffect(() => {
document.addEventListener('selectionchange', handleSelection);
return () => {
document.removeEventListener('selectionchange', handleSelection);
};
});
I'm using the autocomplete editor of HOT, but needed to have my own template of the option-list. I've been able to accomplish that, by removing the default display and replacing it with my own while doing a lazy load of its content. But I need to perform specific tasks on each of the options being clicked.
The issue is that I cannot find a way to have my <a ng-click='doSomething()'> or <a onclick = 'doSomething()'> tags to find my "doSomething" function.
I've tried the extend prototype of the autocomplete instance, have put my function out there on my controller to no avail. Is there any way I can insert a delegate function inside this editor that could be triggered from inside my custom-made template? (Using angularjs, HOT version 0.34)
Dropdown options cannot interpret HTML instead of Headers.
To perform action when an option is selected you can use Handsontable callback : AfterChange or BeforeChange
Here you can find all HOT callbacks https://docs.handsontable.com/0.34.0/tutorial-using-callbacks.html
This JSFiddle can help you http://jsfiddle.net/fsvakoLa/
beforeChange: function(source, changes){
console.log(source, changes)
},
afterChange: function(source, changes){
console.log(source, changes);
if(!source) return;
if(source[0][1] == 0){//if ocurs on col 0
let newsource = optionsWBS[source[0][3]];
cols[1] = {
type : 'dropdown',
source: newsource,
strict: false
};
hot.updateSettings({columns: cols});
hot.render();
};
}
Thanks, I actually needed actions specific to each area being clicked. What I did to make it work was this: while inserting the items for the list, I created the element and bound it to the function right away: liElement = document.createElement('li') .... liElement.onclick = doSomething(){} .... got it working this way ..