[BUG]: Error in Practice Question (Drag And Drop)

[HardikGoyal2003]

Describe the bug

On using Drag and Drop in practice question its producing error.

URL of the page where the issue is observed.

https://www.oppiatestserver.org/learn/math/fractions/practice/session?selected_subtopic_ids=%5B1%5D#question-player-result=%7B%22I1WekSnlbKyX%22%3A%7B%22linkedSkillIds%22%3A%5B%22NGZ89uMw0IGV%22%5D%2C%22answers%22%3A%5B%7B%22isCorrect%22%3Atrue%2C%22timestamp%22%3A1706735307985%2C%22taggedSkillMisconceptionId%22%3Anull%7D%5D%2C%22usedHints%22%3A%5B%5D%7D%2C%22j2tgbg6RgD7u%22%3A%7B%22linkedSkillIds%22%3A%5B%22NGZ89uMw0IGV%22%5D%2C%22answers%22%3A%5B%7B%22isCorrect%22%3Atrue%2C%22timestamp%22%3A1706735312881%2C%22taggedSkillMisconceptionId%22%3Anull%7D%5D%2C%22usedHints%22%3A%5B%5D%7D%2C%22cwVrxhAfeO4I%22%3A%7B%22linkedSkillIds%22%3A%5B%22NGZ89uMw0IGV%22%5D%2C%22answers%22%3A%5B%7B%22isCorrect%22%3Atrue%2C%22timestamp%22%3A1706735316671%2C%22taggedSkillMisconceptionId%22%3Anull%7D%5D%2C%22usedHints%22%3A%5B%5D%7D%2C%22Lh230X8heghy%22%3A%7B%22linkedSkillIds%22%3A%5B%22i4VpUyd8TSeR%22%5D%2C%22answers%22%3A%5B%7B%22isCorrect%22%3Atrue%2C%22timestamp%22%3A1706735320301%2C%22taggedSkillMisconceptionId%22%3Anull%7D%5D%2C%22usedHints%22%3A%5B%5D%7D%2C%22EV6RCzYIziDs%22%3A%7B%22linkedSkillIds%22%3A%5B%22NGZ89uMw0IGV%22%5D%2C%22answers%22%3A%5B%7B%22isCorrect%22%3Atrue%2C%22timestamp%22%3A1706735325191%2C%22taggedSkillMisconceptionId%22%3Anull%7D%5D%2C%22usedHints%22%3A%5B%5D%7D%2C%221cuyfbbuAtDQ%22%3A%7B%22linkedSkillIds%22%3A%5B%22NGZ89uMw0IGV%22%5D%2C%22answers%22%3A%5B%7B%22isCorrect%22%3Atrue%2C%22timestamp%22%3A1706735333590%2C%22taggedSkillMisconceptionId%22%3Anull%7D%5D%2C%22usedHints%22%3A%5B%5D%7D%2C%22V4beAMS0lCaE%22%3A%7B%22linkedSkillIds%22%3A%5B%22i4VpUyd8TSeR%22%5D%2C%22answers%22%3A%5B%7B%22isCorrect%22%3Atrue%2C%22timestamp%22%3A1706735364125%2C%22taggedSkillMisconceptionId%22%3Anull%7D%5D%2C%22usedHints%22%3A%5B%5D%7D%2C%22sIEPLvzYAx0x%22%3A%7B%22linkedSkillIds%22%3A%5B%22NGZ89uMw0IGV%22%5D%2C%22answers%22%3A%5B%7B%22isCorrect%22%3Atrue%2C%22timestamp%22%3A1706735370460%2C%22taggedSkillMisconceptionId%22%3Anull%7D%5D%2C%22usedHints%22%3A%5B%5D%7D%2C%2220R5MQdRflRM%22%3A%7B%22linkedSkillIds%22%3A%5B%22NGZ89uMw0IGV%22%5D%2C%22answers%22%3A%5B%7B%22isCorrect%22%3Atrue%2C%22timestamp%22%3A1706735373627%2C%22taggedSkillMisconceptionId%22%3Anull%7D%5D%2C%22usedHints%22%3A%5B%5D%7D%2C%22PE9uZ4S82was%22%3A%7B%22linkedSkillIds%22%3A%5B%22NGZ89uMw0IGV%22%5D%2C%22answers%22%3A%5B%7B%22isCorrect%22%3Atrue%2C%22timestamp%22%3A1706735382049%2C%22taggedSkillMisconceptionId%22%3Anull%7D%5D%2C%22usedHints%22%3A%5B%5D%7D%7D

Steps To Reproduce

1. visit the page url
2. access the question shown in video

Expected Behavior

It should not produce any error.

Screenshots/Videos

https://github.com/oppia/oppia/assets/135348086/e721a117-5e05-4a0e-bf5a-df6c15a5ab02

What device are you using?

Desktop

Operating System

Linux

What browsers are you seeing the problem on?

Chrome

Browser version

No response

Additional context

No response

Tips for developers

Before addressing the bug, please identify which PR caused the issue (you can follow the steps here). If you identify the PR, comment on the issue with a link to it. If not, mention the commit hash of the oldest commit you saw the bug on (and the month and year it was made in).

Also, if this is your first issue, please make sure to follow https://github.com/oppia/oppia/wiki/Contributing-code-to-Oppia#choosing-a-good-first-issue and https://github.com/oppia/oppia/wiki/Contributing-code-to-Oppia#setting-things-up before claiming it. Thanks!

[Akhilesh-max]

@seanlip

Problem: The original issue was a TypeError: Cannot read properties of undefined (reading 'nativeElement') being thrown in the setFocus method. This error was occurring because the code was trying to access the nativeElement property of an object that was undefined. This I guess could have happened if this.listItems was empty or if this.activeItem was not a valid index in the array that was returned by this.listItems.toArray().

Proposed solution : I guess one possible solution is perhaps to add additional checks in the setFocus method to ensure this.activeItem is a valid index for the listItems array and that the item at that index is not undefined before trying to access the nativeElement

file changed :: /oppia/extensions/interactions/DragAndDropSortInput/directives/oppia-interactive-drag-and-drop-sort-input.component.ts

Changes made ::

Before ::

https://github.com/oppia/oppia/assets/124369508/af9b4c1e-c1ce-4b7b-a9b1-5fcd748fbc51

After ::

https://github.com/oppia/oppia/assets/124369508/214d91f0-d615-41d6-b2fe-574f0a444a80

I trust that this solves this issue, please let me know if i am right in the approach and solution proposed.

Thank you.

[seanlip]

@Akhilesh-max, some notes:

• Are you able to reproduce the issue locally and deterministically (i.e. it happens all the time)?
• When solving server/console errors, don't just try to add conditions to hide the error. That is not useful and can in fact lead to issues because we now no longer get the signal that there is an error. Instead, try figuring out (through analysis) what causes this.listItems to be empty or this.activeItem to not be a valid index, and fix the underlying bug (through proper analysis of the code).

[Akhilesh-max]

@seanlip,

I have taken note of the points you’ve mentioned and have assigned myself to address them. And, I’ve made some progress on this.

Before submitting the PR, I will ensure to present the solution to you for your review and approval.

Thank you for your guidance.

[hrshkshri]

Hey @Akhilesh-max Do you happen to have any updates on this ...?

[Akhilesh-max]

Hello @hrshkshri, I appreciate the reminder. I haven’t been able to work on this task for some time and had forgotten about my assignment. However, I’ll take a look again. However, If I’m unable to proceed in the next few days, I’ll make sure to unassign myself.

Thank you.