hubspot / select Goto Github PK

When I navigate to the example website with my iPhone or Mac iOS Simulator, the select functionality does not work.

On iOS 9.2 the select box won't trigger the options in safari anymore. On our websites about 55% of iOS users is running 9.2 already making them unable to order products. We had to remove the plug-in for now.

After selecting option from select list, if we press tab, its focusing same select list in Internet Explorer

Hi,

The select.js looks great and works perfectly on the initial page load.
https://www.luminoto.com/photos/trump-tower-chicago-black-white

However, when you go to a new page and click for the element, the drop down box shifts over to the right. (see attachment)

I am running a web app with Rails and wondering if turbo links has anything to do with this issue.

Otherwise I am wondering if it is a css bug in my app. Has anyone else reported this same issue?

Thanks,
Jeff

It didn't begin well for me, first example seems to be working incorrectly.

1. Open http://github.hubspot.com/select/docs/welcome/
2. Shrink the browser vertically to about the size in the screenshot and open the dropdown.
3. Notice that it's not possible to select the topmost items because they are clipped and one can't scroll there.

Lot's of people view the web from what is basically a mail slot sized hole, I know it's ridiculous, but that is the way it is.

I think it should not expand the floating area topwards out of the window (since one can't scroll there).

select.js seems to be causing memory leaks in my application. I noticed in the code that a handful of event listeners get attached but they never get removed. Do you plan to add a destroy() function that cleans up all the event listeners?

After openening a select one might want to close it by clicking the previously selected option. Though the value has not changed, Select.prototype.pickOption() still calls this.triggerChange() which causes our AJAX form to submit.

We could add a valueHasChanged flag and check this before calling this.triggerChange():

Select.prototype.pickOption = function(option, close) {
  var _this = this, valueHasChanged;
  if (close == null) {
    close = true;
  }
  valueHasChanged = this.value !== option.getAttribute('data-value');
  this.value = this.select.value = option.getAttribute('data-value');
  if (valueHasChanged) {
    this.triggerChange();
  }
  if (close) {
    return setTimeout(function() {
      _this.close();
      return _this.target.focus();
    });
  }
};

Are there any plans to do a filtering combobox functionality?

I'm referring to something like this.

Hello zack,

The plugin is not working on latest Chrome (51) for windows users.
you can't open tether-select on click.

Do you want me to investigate and make a PR for this ?

Cheers,
Mickael

Tether places the dropdown element in the body which ignores the font size of the parent select. I am using select.js specifically to gain control over the style of my select elements, however, inherited font sizes seems to be left out. Is there any known way around this issue?

Chrome on Android M:
With the default setting of useNative: true the select box does not reveal its contents on touch.

Is there some way to reload the select after options have dynamically changed?

POC http://codepen.io/felquis/pen/kXpbjv

Hi, I spent some time today debugging my application and I found out the error was caused by the ng-model with a number.

I fixed it just changing the number to a string, you may like to know about this issue.

Best.

Click on a select element (eg in the demo http://github.hubspot.com/select/docs/welcome/) => The options are displayed.
Move the mouse over one of the options => The option under the mouse is highlighted.
Type a character, for which one or more options beginning with that char exist => the selection highlight correctly jumps to the first option beginning with the typed char.

However, immediately afterwards, the highlight jumps back to whatever is under the mouse (which has not moved). Note the visible options have probably changed due to scrolling effect. There is a surplus mouseover event.

When you use screen reader(eg. VoiceOver) and arrow through the dropdown list of choices, the screen reader does not announce the choices.

I have no idea what is up here, it's a weird one...

When the user clicks, the div border goes blue and that's it. Pressing up/down shows the styled list of options. Then after awhile, pressing up/down opened the native underlying select.

It seems like the focus event handler is being called, but not the click one. I even tried re-adding the click handler manually in the console (while stopped on a breakpoint in the focus callback).

This doesn't happen consistenly though. We've had very few reports of it. We couldn't reproduce then suddenly one support agent could. I can't see how any of our code could be causing it.

Hello,

First of all, thanks for the plugin! I'm working on a SPA will lots of custom <select> elements and came across a few issues... Related to #23, I'll bring some more details here hoping that it will get fixed soon.

My biggest issue is that after navigating through the website, the previously used selects aren't removed from the DOM. I also noticed there was a few addEventListener using anonymous functions; using a named function would allow us to call the removeEventListener after that. This would help with GC & memory leaks.

Pretty long list, right? And my computer screen wasn't long enough 😅

Also, all of theses nodes have a transform property applied; that will create a new GraphicsLayer for each one of them, which could be quite dangerous..

Let me know if I can help in any way, I'd be happy to do so.

It always aligns to the left of the .select-target. But when a select is positioned at the right end of your screen, .select-content falls out of the viewport, in that case it needs to be positioned to the right end of .select-target.

Hello guys, thanks for your library.
I am building a WebPage with your library but I need to know when the library finished to render all the components, do you have into the library an onComplete event/callback that I can listen/execute?

Something like.

Select.init({
onComplete: function(){
// to do.
}
});

Thanks A.

Hi guys,

I just came across this bug where the select doesn't work in the touch screen PC, using mouse.
I was debugging the code and found out:

select.js line:1378
touchDevice = 'ontouchstart' in document.documentElement;
clickEvent = touchDevice ? 'touchstart' : 'click';

If its touch screen, it registers clickEvent with "touchstart", and ignores the mouse click event.

Cheers

I haven't seen activity since a while and there is some very important issues #45 even pr to solve it #50.

It would be nice add optgroup support

Hi

currently the select drop down is rendered as the last tag just before 'body' this means its incredibly difficult to style in SPA pages.

Is there any way to make it render inside the container where the select element exists.

thanks

Hello! When triggering the select in a modal box or lightbox (bootstrap modal), the dropdown list appears under the lightbox as shown in this picture:

Any ideas how to fix it? Thank you in advance!

The project's demo page is not loading the http assets which prevents the examples from working.

When you first open a select, The list show in the upper left corner for fews milliseconds before it goes to the right position.Probably because the instruction to show it in the code is placed before the positioning ?

When I tab through the form fields in Safari, the selects are simply ignored.

Safari 8.0.3
Mac OS X 10.10.2

When I attempt to install with NPM, I'm prompted to install bower. I would rather not introduce bower as a dependency on my project.

npm install tether-select --save

> [email protected] install /Users/anthonygonzalez/src/glossier-v2/node_modules/tether-select
> bower install

sh: bower: command not found
npm ERR! Darwin 15.5.0
npm ERR! argv "/opt/nodes/5.4.0/bin/node" "/opt/boxen/nodenv/versions/5.4.0/bin/npm" "install" "tether-select" "--save"
npm ERR! node v5.4.0
npm ERR! npm  v3.3.12
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn

npm ERR! [email protected] install: `bower install`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the [email protected] install script 'bower install'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the tether-select package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     bower install
npm ERR! You can get their info via:
npm ERR!     npm owner ls tether-select
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/anthonygonzalez/src/glossier-v2/npm-debug.log

Select is not working on my mobile phone Samsung Galaxy S4 mini i9195 when has display: none. Function useNative() is working but options do not display on my phone due to this display: none issue. When i deleted display:none everything is working fine.

I know that there was a fix after iOS 9.2 came out. But it stopped working after iOS updated to version 9.2.1

@zackbloom

Visit the Select home page and click the example Select at the top.

Uncaught TypeError: Cannot read property 'documentElement' of null 

Seeing this since upgrading to Drop v0.2.x (the one which removed jQuery dep). I made some quick changes to handle the loss of dropInstance.$drop (and instead I use $(dropInstance.drop) (since select style has a jQuery dependency... lol), but I'm running into this new error. I traced it to the .toggle() call in Drop and the ownerDocument property used in Tether's utils.coffee, but got stuck there. Thoughts?

Hi,

I am really looking forward to implementing this custom style dropdown into my rails app, but keep getting these errors.

Uncaught ReferenceError: Tether is not defined select.js
Uncaught Error: You must include the utils.js file before tether.js
Uncaught ReferenceError: Select is not defined

when calling Select.init();

I have ordered the javascript loading as follows.
//= require ../../../vendor/assets/javascripts/tether/utils.js
//= require ../../../vendor/assets/javascripts/tether/tether.js
//= require ../../../vendor/assets/javascripts/tether/select.js

Im wondering if anyone experiences the same in a Rails app?

Thanks,
Jeff

Heya, We have noticed issues where this functionality is not working on Windows Phone 8.1 and also on some Blackberry devices. We have found that the clickable area is above the select box, do you know if there is a workaround for this??

Cheers!

Add a class (to .select-target?) and disable the control if the underlying select element is disabled.

Currently using the following workaround:

$('select').each(function() {

    var $this = $(this),
        select = new Select({el: this});

    select.disable = function() {
        $this.prop('disabled', true);
        $this.siblings('.select-target').addClass('select-target-disabled');
    };

    select.enable = function() {
        $this.prop('disabled', false);
        $this.siblings('.select-target').removeClass('select-target-disabled');
    };

    select.on('open', function() {
        if($this.prop('disabled')) {
            select.close();
        }
    });

    if($this.prop('disabled')) {
        select.disable();
    }

});

Selects' dropdown fails to appear, still works with Chrome.

There are two usability problems when scrolling.

1. Unless you are actively scrolling, there is no indicator that shows if there are more items above/below (arrows would be nice).
2. If you scroll hard, the select box go to the last item (which is expected) and the entire page scrolls down (unexpected, and undesirable).

Great work btw, I stumbled this looking for alternatives to select2 and chosen.

Alex

Clicking on a Select select box does nothing at all. Using Firefox 40.0.3 on Android.

The title pretty much says it. I'm not sure what to do here, im following the examples and i can't seem to use both libraries. If I remove select, drop works.

select.js :

(function() {
  var currentThemeClassName, init, setupHeroSelect, setupThemeSelect;

  init = function() {
    setupHeroSelect();
    return setupThemeSelect();
  };

  setupHeroSelect = function() {
    return new Select({
      el: $('.jobfield-select')[0],
      alignToHighlighted: 'always'
    });
  };

  currentThemeClassName = void 0;

  setupThemeSelect = function() {
    var $select, $showcase, select;
    $showcase = $('#themeShowcase');
    $select = $('.themes-select');
    currentThemeClassName = $select.val();
    select = new Select({
      el: $select[0],
      className: currentThemeClassName,
      alignToHighlighted: 'always'
    });
    return $select.on('change', function() {
      var newClassName;
      newClassName = $select.val();
      $([select.drop, select.target, $showcase[0]]).removeClass(currentThemeClassName).addClass(newClassName);
      return currentThemeClassName = newClassName;
    });
  };

  $(init);

}).call(this);

drop.js :

        $('.drop-inner').each(function(){
          var drop_classes = 'drop-theme-basic drop-target-hover-card';
          if($(this).hasClass('social-drop')){
            drop_classes = 'drop-example-theme-social-sharing';
          }
          drop = new Drop({
            target: $(this).find('.drop-target')[0],
            content: $(this).find('.drop-content')[0],
            classes: drop_classes,
            position: 'bottom center',
            openOn: 'click'
        });
      });

Can anyone tell me why they won't work simultaneously ?

Is there a reason bower is required for the npm module?

I don't use bower for anything else in my build process and would prefer to not have to install it when I just need the dist file.