Dropdown Getting freezed

Posted by: technical.store.technical on 23 June 2021, 3:38 am EST

    • Post Options:
    • Link

    Posted 23 June 2021, 3:38 am EST

    Hi Team,

    I’m facing an issue and reproduced the same issue in the below snippet.

    https://stackblitz.com/edit/angular-zj7dgw?file=src/app/app.component.ts

    Steps to reproduce the issue : -

    1. Click on the subsubjects dropdown and without closing it, click on the subjects dropdown. - Now the dropdown of the subsubjects is getting stuck.

    2. Click on the subsubjects dropdown and without closing it, click on the sections dropdown- in this case also subsubjects dropdown is getting stuck.

    3. Click on the subjects dropdown and without closing it, click on the sections dropdown- in this case subjects dropdown it getting stuck.

    I’ve added the below extra code -

    1. for subjects : -
    
     isDroppedDownChanged: s => {
                if (s.isDroppedDown && s.checkedItems.length === 0) {
                  s.text = null;
                  multiSel.inputElement.value = '';
                  item.subjects = [];
                  const subSubjectsColIndex = grid.columns.getColumn('Subsubjects')
                    .index;
                  const rng = new wjcGrid.CellRange(rowIndex, subSubjectsColIndex);
                  item.Subsubjects = [];
                  grid.refreshRange(rng);
                }
              }
    
    
    1. for subsubjects -
    
    isDroppedDownChanged: s => {
                if (s.isDroppedDown && s.checkedItems.length === 0) {
                  s.text = null;
                  multiSel.inputElement.value = '';
                  item.Subsubjects = [];
                }
              }
    
    
    1. for sections : -
    
    isDroppedDownChanged: s => {
                if (s.isDroppedDown && s.checkedItems.length === 0) {
                  s.text = null;
                  multiSel.inputElement.value = '';
                  item.section = [];
                  const subjectsColIndex = grid.columns.getColumn('subjects').index;
                  const subSubjectsColIndex = grid.columns.getColumn('Subsubjects')
                    .index;
                  const rng = new wjcGrid.CellRange(
                    rowIndex,
                    subjectsColIndex,
                    rowIndex,
                    subSubjectsColIndex
                  );
                  item.subjects = [];
                  item.Subsubjects = [];
                  grid.refreshRange(rng);
                }
              }
    
    

    isDroppedDownChanged i’ve added to clear the value on click of the dropdown if it is not present in the dropdown.

    Example - this can be observed in

    2nd row - Subjects = " French" it not present in the subjects dropdown so it’s value should get cleared when i click on the subjects cell dropdown.

    After adding this code my above issue started to occur.

    Please provide solution for the above issue.

    Thank you.

  • Posted 24 June 2021, 5:57 am EST

    Hi team,

    Can you please look into this issue.

    Thank you.

  • Posted 25 June 2021, 5:56 am EST

    Hi team,

    Can you please provide solution.

    Thank you.

  • Posted 25 June 2021, 7:02 am EST - Updated 3 October 2022, 1:30 pm EST

    Hi,

    I am afraid I was unable to replicate your issue. Please refer to the gif attached for reference.

    Can you please recheck the sample to make sure that it reproduces your issue?

    Regards,

    Ashwin

  • Posted 25 June 2021, 8:06 am EST

    Hi ashwin,

    Add a new row and you’ll be able to replicate the issue.

    OR clear French , then also it’ll behave the same way.

    Regards

  • Posted 28 June 2021, 9:33 am EST

    Hi,

    This issue is arising because every time when the isDroppedDownChanged event is fired and checkedItems length is 0, subSubjects column’s cell range is being refreshed, And subsubjects column’s dropDown remains open due to cell range refresh.

    To overcome this issue, You may update the if condition inside isDroppedDownChanged event as follows -

    isDroppedDownChanged: s => {
                if (
                  s.isDroppedDown &&
                  s.checkedItems.length === 0 &&
                  multiSel.inputElement.value != ''
                ) {
                  multiSel.inputElement.value = '';
                  item.subjects = [];
                  const subSubjectsColIndex = grid.columns.getColumn('Subsubjects')
                    .index;
                  const rng = new wjcGrid.CellRange(rowIndex, subSubjectsColIndex);
                  item.Subsubjects = [];
                  grid.refreshRange(rng);
                }
              }
    
    

    For better understanding, you may refer to the below code sample -

    https://stackblitz.com/edit/angular-cwpzvg?file=src/app/app.component.ts

    ~regards

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels