Fixes unexpected behavior of step panel dropdown

[keshav234156]

Fixes #1327
Fixes unexpected behavior of step panel dropdown

[keshav234156]

@jywarren @harshkhandeparkar Can you please review the changes!!

[codecov]

Codecov Report

Merging #1328 into main will decrease coverage by 0.01%.
The diff coverage is 16.66%.

@@            Coverage Diff             @@
##             main    #1328      +/-   ##
==========================================
- Coverage   66.58%   66.57%   -0.02%     
==========================================
  Files         125      125              
  Lines        2547     2546       -1     
  Branches      397      397              
==========================================
- Hits         1696     1695       -1     
  Misses        851      851

Impacted Files	Coverage Δ
examples/lib/intermediateHtmlStepUi.js	11.36% <0%> (ø)	⬆️
examples/lib/defaultHtmlStepUi.js	11.37% <20%> (-0.53%)	⬇️

[criticic]

LGTM 👍

[harshkhandeparkar]

The issue here is that $step becomes a global variable. The fix here is a workaround rather than a proper solution.
I would like to suggest a better solution.

The variables $step and $stepAll can be isolated by making them a part of the step variable. step.$step and step.$stepAll.

Please change the following lines and it should work.

File: scopeQuery.js

1. line 51-53

function scopeSelector(scope){
- return $scope(scope);
+ return new $scope(scope);
}

2. line 61-63

function scopeSelector(scope){
- return $scopeAll(scope);
+ return new $scopeAll(scope);
}

File: defaultHtmlStepUI.js

1. line 18-19

-  let $step, $stepAll;
-                               

2. line 74-77

-    $step = scopeQuery.scopeSelector(step.ui);
-    $stepAll = scopeQuery.scopeSelectorAll(step.ui);
-    step.ui.$step = $step;
-    step.ui.$stepAll = $stepAll;

and replace by

+   step.$step = scopeQuery.scopeSelector(step.ui);
+   step.$stepAll = scopeQuery.scopeSelectorAll(step.ui);

+    let {$step, $stepAll} = step;

3. line 192-194: Revert the changes

4. line 261

- function onDraw() {
+ function onDraw({$step, $stepAll}) {

5. line 267-269

function onComplete(step) {
+  let {$step, $stepAll} = step;
   $step('img').show();
   $stepAll('.load-spin').hide();

Thank You!

[keshav234156]

@jywarren So made changes as per the @harshkhandeparkar review. I also think it good to make $step , $stepAll local variable. Thanks a lot, @harshkhandeparkar for such a constructive review

[harshkhandeparkar]

I am extremely sorry I forgot the intermediateHtmlStepUi file. I was going through your latest changes and I found out that insert step was not working.

Please change line 78-79

- const $step = step.ui.$step,
-      $stepAll = step.ui.$stepAll;
+ const $step = step.$step,
+      $stepAll = step.$stepAll;

[harshkhandeparkar]

LGTM. Just check everything once locally. Thanks!

[keshav234156]

Thanks!! @harshkhandeparkar for notifying me

[jywarren]

Great work!!!