9 Replies Latest reply on Feb 27, 2020 3:29 PM by John 'JB' Brock-Oracle

    oj-select-single prevent it from popping up a search type list?

    1812359

      Hi,

       

      I am trying to convert my old oj-select-ones over to oj-select-singles because the select-ones are deprecated. The select-ones were working great for what I needed them for as I have some very basic static dropdowns with only a few values.

       

      When I convert them oj-select-single I can get the functionality working by adding my values to an array, etc. However, when using the JET application and you click into the select-single it opens up and covers the entire screen and provides the search/filter capabiity. I really just need it to present the dropdown inline like the cookbook examples. I have followed the code exactly.

       

      My only difference seems to be that I am using the android theme when serving the application. Is there a way to hopefully override this behavior? It's very useful for a drop down with tonnes of data in it, but in instances where there are only 3 or 4 options its not a great experience for the user.


      Example of behaviour when clicking in the select-single:

      FullScreen.JPG

      Example of select-one behaviour:

      SelectOne.JPG

       

      Code I am using:

      <oj-select-single id="prioritySelect" aria-labelledby='priorityLabel' value="{{priorityFilter}}"
      data="[[selectPriorityDP]]" style="max-width:20em;" disabled="[[callNumberEntered]]">
      
        • 1. Re: oj-select-single prevent it from popping up a search type list?
          John 'JB' Brock-Oracle

          What version of JET are you using?

          I believe you are running into a bug that was in 8.0.0 and is fixed in 8.1.0, but I want to make sure.

           

          One other possibility is that you are still using the ojs/ojselectcombobox reference instead of the ojs/ojselectsingle.  I think it's the bug though. :-)

           

          Thanks,

           

          --jb

          • 2. Re: oj-select-single prevent it from popping up a search type list?
            1812359

            Yes, I am on 8.0. I can upgrade to 8.1 and see what happens (I thought I browsed the notes but probably missed it).

             

            Is there a way to control this? There are some select-single I would want this to happen on as its useful for searching, but for just the ones I want a drop down on I wouldnt want it on.

            • 3. Re: oj-select-single prevent it from popping up a search type list?
              John 'JB' Brock-Oracle

              That's a good question about controlling the filter feature.  It was possible with oj-select-one, but I don't see the same API  listed in the API docs for the select-single.  Let me ask the engineers and get back to you on that one.

              • 4. Re: oj-select-single prevent it from popping up a search type list?
                1812359

                Ok, thanks.

                 

                I have some select-singles where I am using a listView to display the results, in those instances it's great that it essentially opens up in a new window as shown above, so wouldn't want to lose that if I upgraded. Obviously not desirable for just select lists with a handful of records. Either way, I will back things up and upgrade and see what happens.

                • 5. Re: oj-select-single prevent it from popping up a search type list?
                  John 'JB' Brock-Oracle

                  The screenshot you are showing for select-single is not correct.  There isn't any search icon normally and the the input is just part of the component now, not a separate field shown in the pulldown like it was in select-one.  Can you show me the full HTML and JS that you are using for this?  Something is off.  It's not the bug that I was thinking of here.  If I use the below code with 8.0.0, it will look like this

                   

                   

                  HTML

                   

                    <oj-select-single id="prioritySelect" aria-labelledby='priorityLabel' value="{{priorityFilter}}"  
                  data="[[selectPriorityDP]]" style="max-width:20em;"></oj-select-single>
                  

                   

                  JavaScript

                        this.priorityFilter = ko.observable('high');
                    
                        let browsers = [
                          { value: 'all', label: 'All' },
                          { value: 'high', label: 'High' },
                          { value: 'medium', label: 'Medium' },
                          { value: 'low', label: 'Low' }
                        ];
                    
                        this.selectPriorityDP = new ArrayDataProvider(browsers, { keyAttributes: 'value' });
                  
                  • 6. Re: oj-select-single prevent it from popping up a search type list?
                    1812359

                    Mine is basically the same thing. Keep in mind though, that I am serving with the android theme, so perhaps that makes a difference.

                     

                    self.priorityFilter = ko.observable("ALL");
                    var selectPriority = [
                      { value: 'ALL', label: 'All' },
                      { value: 'H', label: 'High' },
                      { value: 'M', label: 'Medium' },
                      { value: 'L', label: 'Low' }];
                    self.selectPriorityDP = new ArrayDataProvider(selectPriority, { keyAttributes: 'value' });
                    

                     

                    <oj-select-single id="prioritySelect" aria-labelledby='priorityLabel' value="{{priorityFilter}}"
                    data="[[selectPriorityDP]]" style="max-width:20em;" disabled="[[callNumberEntered]]"></oj-select-single>
                    

                     

                    Source before select:

                    htmlbeforeselect.JPG

                    After select where window pops up, I see a class getting added oj-listbox-fulscreen:

                    afterselect.JPG

                    • 7. Re: oj-select-single prevent it from popping up a search type list?
                      John 'JB' Brock-Oracle

                      "Keep in mind though, that I am serving with the android theme,...."  Ahhhh, that will definitely make a difference.  Let me try that out.

                      • 8. Re: oj-select-single prevent it from popping up a search type list?
                        John 'JB' Brock-Oracle

                        I'm not able to reproduce this.  I've moved back to 8.0.0 and used the alta-android theme, but this is what I get.  It does not include any kind of fullscreen class.

                        • 9. Re: oj-select-single prevent it from popping up a search type list?
                          1812359

                          Hmm, well that's strange. What could be injecting the listbox-fullscreen class?

                           

                          It seems to be prevalent throughout the application on all select-singles. I tried deleting my custom css file and it made no difference to the behaviour. Also, I served the app with the default web theme and the issue is still there.

                           

                          I will do an ojet strip / restore and also replace all the standard css files and see what happens.

                          • 10. Re: oj-select-single prevent it from popping up a search type list?
                            1812359

                            Ok, I've upgrade jet to 8.1, stripped and restored the project, deleted css files and built the project. Same result.

                             

                            I think I have narrowed it down though. If I use the app with a full browser window then the dropdown seems to work as yours does. However, if you hit F12 and select pixel or the size of some other type of mobile device (which is where we will be using this), then this is when it uses the full screen overlap. I'm not sure what it uses to determine why it should go full screen, I set the width on these inputs (20em) and they don't take up the full screen.

                             

                            Is this because on a mobile device when you click into the search the keyboard would popup? If so, then I suppose it makes sense. Although it doesnt help in situations where you don't need/want the search and just want a simple drop down with a few options in it?

                            • 11. Re: oj-select-single prevent it from popping up a search type list?
                              John 'JB' Brock-Oracle

                              Ok, it sounds like there are a few more details to your environment than I was aware of. :-)

                               

                              Can you provide a step by step on how to repro this?

                               

                              Are you on a desktop browser, but using the Android theme?

                              Are you on a mobile device of some kind and somehow also setting fullscreen? attached keyboard and external screen maybe?

                               

                              I want to be able to get a local repro case so I can file a bug if that is what is going on here.

                               

                              Thanks for working through all of this with me.  It's an interesting situation to figure out for sure.

                               

                              --jb

                              • 12. Re: oj-select-single prevent it from popping up a search type list?
                                1812359

                                No problem. I am using the android theme, but that doesn't seem to matter as the issue happens with the default alta web theme.

                                 

                                It is a web app, but it is being used on mobile devices almost primarily. So when used on a mobile device this behaviour happens where the select-single takes up the fullscreen. This behaviour also happens on a web browser when using the chrome dev tools and setting the device to a mobile device. This is how I am doing all of my testing vs directly on a device.

                                 

                                The only scenario I can get the select-single to work as yours was working was if using a web browser in normal web mode.

                                 

                                For now I will stick with the deprecated selects for these basic ones. Let me know if you need more info.

                                • 13. Re: oj-select-single prevent it from popping up a search type list?
                                  John 'JB' Brock-Oracle

                                  Thanks for the clarification and more details.  That will help a lot.  I completely agree with your decision to stay with oj-select-one for now.  It's not going anywhere so you are not running any risk of the app that working in the future by doing so.

                                   

                                  I'll get a repro created and file necessary bugs if I can find them.