Skip to content
This repository has been archived by the owner on Oct 2, 2019. It is now read-only.

Dropdown flickering cause opacity set to 0 when filtering #1298

Closed
onemenny opened this issue Nov 9, 2015 · 10 comments
Closed

Dropdown flickering cause opacity set to 0 when filtering #1298

onemenny opened this issue Nov 9, 2015 · 10 comments
Labels
type: bug

Comments

@onemenny
Copy link

onemenny commented Nov 9, 2015

Please see: http://plnkr.co/edit/erN0pTgEVxBrfJF4p9U7?p=preview
Use the select2 theme and type 'a' and then 'd' you will see that on each letter you type the drop filckers.

It appears that this is cause by line 1091

// Hide the dropdown so there is no flicker until $timeout is done executing.
            dropdown[0].style.opacity = 0;

            // Delay positioning the dropdown until all choices have been added so its height is correct.
            $timeout(function(){
.
.
.
 // Display the dropdown once it has been positioned.
              dropdown[0].style.opacity = 1;
            });

opacity should not change.
@chnldw
Copy link

chnldw commented Nov 11, 2015

Same here with angular 1.4.7 and ui-select 0.13.2

onemenny added a commit to onemenny/ui-select that referenced this issue Dec 9, 2015
@onemenny
disable opacity set to zero cause of flickering when typing in ddl see (
dc7e51d 
angular-ui#1298)
@cfey
Copy link

cfey commented Dec 15, 2015

this fixed it for me as well

@onemenny onemenny mentioned this issue Dec 29, 2015
Open
@shyamal890
Copy link

Linking similar issue #1314

@aaronroberson Can you please have a look at this solution and commit the change to this library.

@aaronroberson
Copy link
Contributor

@shyamal890 Can you direct me to a PR that I can review and accept?

@onemenny
Copy link
Author

onemenny commented Feb 9, 2016

@aaronroberson look at my pull requests #1371 I already enhanced it with more bug fixes

@aaronroberson
Copy link
Contributor

Any chance you can remove the updates to the dist files and optionally
squash the commits?

On Mon, Feb 8, 2016 at 11:21 PM Menny Rachmanny (onemenny) <
notifications@github.com> wrote:

@aaronroberson https://github.com/aaronroberson look at my pull
requests #1371 #1371 I
already enhanced it with more bug fixes

—
Reply to this email directly or view it on GitHub
#1298 (comment)
.

@onemenny
Copy link
Author

onemenny commented Feb 9, 2016

Sure, I'll do it later on today.

onemenny added a commit to onemenny/ui-select that referenced this issue Feb 10, 2016
@onemenny
disable opacity set to zero cause of flickering when typing in ddl see (
5ca372a 
angular-ui#1298)

remove opacity change in dist

fix lost focus (on backspace or adding new tag) when append-to-body is used

fixing bug - when typing a letter that exists in one of the items in the ddl and then deleting it causes the (tag new item) to persists

fix bug: when using closeOnSelect with tagging - hitting the enter key sets the new tag but keeps the search input value

tagging:
--making sure no empty elements gets in on paste operation
--fix dupes search

added isNewTagDuplication optional user method to check if new tag (when using tagging where each tag is an object) already exists in the list

adding safety check that the control is still open cause _ensureHighlightVisible is called using a timeout

adding public to gitignore

ignoring public folder

fix tagging: when using 'tagging' (add tags on the fly) with refreshDelay, the keyup event fires before or after the 'refresh' (attr) method. added a fix to implement the refresh-delay for the keyup event as well

making sure new tag (tag added on the fly) is removed when already exists in the list of tags

fix bug when filtering

reverting back list folder (before fork state)
onemenny added a commit to onemenny/ui-select that referenced this issue Feb 10, 2016
@onemenny
Merge branch 'master' of https://github.com/onemenny/ui-select
bbfe783 
* 'master' of https://github.com/onemenny/ui-select:
  fix bug when filtering
  making sure new tag (tag added on the fly) is removed when already exists in the list of tags
  fix tagging: when using 'tagging' (add tags on the fly) with refreshDelay, the keyup event fires before or after the 'refresh' (attr) method. added a fix to implement the refresh-delay for the keyup event as well
  ignoring public folder
  adding public to gitignore
  adding safety check that the control is still open cause _ensureHighlightVisible is called using a timeout
  added isNewTagDuplication optional user method to check if new tag (when using tagging where each tag is an object) already exists in the list
  tagging: --making sure no empty elements gets in on paste operation --fix dupes search
  fix bug: when using closeOnSelect with tagging - hitting the enter key sets the new tag but keeps the search input value
  fixing bug - when typing a letter that exists in one of the items in the ddl and then deleting it causes the (tag new item) to persists
  fix lost focus (on backspace or adding new tag) when append-to-body is used
  test
  remove opacity change in dist
  disable opacity set to zero cause of flickering when typing in ddl see (angular-ui#1298)
@onemenny
Copy link
Author

@aaronroberson ok, I hope I got it right. everything is squashed and dist is reset.
There are many changes to this pull request and some new test. here are the highlights:

    a. Do not set opacity when typing (causes flickering)
    b. Appen-to-body=true cause loos of focus on tag add/delete, backspace…
    c. Using tags (dashboard tags): type the letter 'a' which should appear in one of the ddl items, then delete the letter (empty search), causes the <'a' new item> to remain in the ddl items
    d. when using closeOnSelect with tagging - hitting the enter key sets the new tag but keeps the search input value
    e. Find dupes: Tags duplication helper method was added (tags may be objects and need comparer function)
    f. Fix ensureHighlight to work only when ctrl.open

@m3co-code m3co-code mentioned this issue Apr 6, 2016
Closed
@yogeshgadge
Copy link

yogeshgadge commented Jun 27, 2016 •
edited
Loading

I am going with the following hack for now.

      // Hide the dropdown so there is no flicker until $timeout is done executing.
      if (dropdown[0].clientHeight == 0) {
         dropdown[0].style.opacity = 0;
      }

@aaronroberson
Copy link
Contributor

aaronroberson commented Apr 1, 2019 via email

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
type: bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@aaronroberson @onemenny @wesleycho @chnldw @yogeshgadge @shyamal890 @cfey