[mfearbyParticipant]

I’m able to do it from a useEffect() block like this for now using a reference to the combobox:

let findInput = ‘#’ + combo.current!._id + ‘ input’;
let input = document.querySelector(findInput);
if (input) {
(input as HTMLInputElement).tabIndex = props.myTabIndex;
}

[mfearbyParticipant]

Thanks. Is this only a temporary stop-gap until the bug is fixed? Setting a fixed maxHeight isn’t going to suit all of my cells.

[mfearbyParticipant]

Thanks for the solution, of sorts. Doesn’t changing the useState variables from ‘const’ to ‘let’ kind of break the intent of React function components? For now I’m using plain HTML buttons because it seems safer than doing things in a “non-React” way to workaround this strange JqxButton behaviour.

I appreciate your time, though. Thanks.

[mfearbyParticipant]

I have tried to include a jQEditor in this codesandbox but I can’t get it to work

[mfearbyParticipant]

Thanks, Todor. I could have sworn I tried it first without a useState() variable for the adapter itself (and it was always returning an empty grid), but perhaps I did something else wrong at the time. In any case, yours works a treat. Seems I don’t need useEffect() either, so that’s an added bonus. Thank you

[mfearbyParticipant]

I found an alternative to codesandbox which allows the jqxcombobox to work, but it doesn’t let me run unit tests

https://stackblitz.com/edit/react-ts-qgefho

[mfearbyParticipant]

I started configuring an isolated/basic demo here but I can’t even get jqwidgets to work in a codesandbox for some reason. It keeps saying:

ModuleNotFoundError
Could not find module in path: 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox' relative to '/src/my-combo.tsx'

I don’t know what I was thinking, trying to do automated testing. I’ve hit brick wall after brick wall with this. It’s no wonder that most developers just ignore it altogether, but I’m trying not to give up.

[mfearbyParticipant]

I tried doing an Enzyme test instead but it totally barfs trying to mount my component (which returns a <JqxComboBox> from the render method). I get these kind of exceptions now:

console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29
Error: Uncaught [Error: Invalid Selector – #JqxComboBoxjqx52b72e9dda50! Please, check whether the used ID or CSS Class name is correct.]

If I do an enzyme shallow() instead of mount() it doesn’t barf but the component is also next to useless, so unless I can mount it properly in a testing environment, I may as well limp along with React Testing Library.

Is there any guidance on how to test React apps using jQWidgets?

[mfearbyParticipant]

My bad. Must have mixed it up with another component. Thanks.

[mfearbyParticipant]

Thanks. I think I’ll just go typescript for everything, since it’s fully supported by React these days. Might make my code cleaner, too

[mfearbyParticipant]

So that’s only a suggestion and not a requirement, then?

[mfearbyParticipant]

NVDA is a free screen reader that’s pretty good, actually. The blind people I know tell me that it’s quite respectable, and given the price, it’s ideal for web developers to test that things are accessible.

I tried using NVDA with that example and it doesn’t read out any of the tooltips unless I move my mouse over the cells, which is not something I could get away with asking vision impaired users to do. Simply moving around the cells with the arrow keys on my keyboard should read back the text in the focused cell, but it does not.

[Author]

Posts