Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Drop down autocomplete lists do not always open as expected #2958

Closed
kim-fitness opened this issue Sep 20, 2019 · 7 comments
Closed

Drop down autocomplete lists do not always open as expected #2958

kim-fitness opened this issue Sep 20, 2019 · 7 comments
Labels
bug Undesired behaviour resolved A fixed issue
Milestone

Comments

@kim-fitness
Copy link
Contributor

kim-fitness commented Sep 20, 2019

Describe the bug
In "Graph Management" page, the drop-down list "Device" sometimes need double-click to open.

To Reproduce
Steps to reproduce the behavior:

  1. Go to page "Graph Management"
  2. Click on 'Device' to open the drop-down list
  3. Click any other place on this page, the "Device" drop-down list will be closed.
  4. Click on 'Device', the drop-down list does not open. (Reproduced)
  5. Click on 'Device' again, the drop-down list is opened.

Expected behavior
No matter how operate on this page, the 'Device' drop-down list should be opened with one click.

Screenshots
Screen Shot 2019-09-20 at 1 39 37 PM

Desktop (please complete the following information):

  • OS: MacOS 10.14
  • Browser: Chrome
  • Version: 76.0.3809.132

Additional context
This issue is introduced by following code from cacti/include/themes/paw/main.js (for example, any other theme has the same issue)

	$('#host').unbind().autocomplete({
		source: pageName+'?action=ajax_hosts',
		autoFocus: true,
		minLength: 0,
		select: function(event,ui) {
			$('#host_id').val(ui.item.id);
			callBack = $('#call_back').val();
			if (callBack != 'undefined') {
				eval(callBack);
			} else if (typeof applyGraphFilter === 'function') {
				applyGraphFilter();
			} else {
				applyFilter();
			}
		}
	}).addClass('ui-state-default ui-selectmenu-text').css('border', 'none').css('background-color', 'transparent');

	$('#host, #host_click').click(function() {
		if (!hostOpen) {
			$('#host').autocomplete('option', 'minLength', 0).autocomplete('search', '');
			hostOpen = true;
		} else {
			$('#host').autocomplete('close');
			hostOpen = false;
		}
	});

When click to open the drop-down list, 'hostOpen' becomes 'true'. But when click out-side the drop-down list to close it, 'hostOpen' still be 'true', that makes next time, when you click on the drop-down list, the code go with 'else' to close it, other than open it.

I have fixed this issue by following code, but it is not perfect, by my fix, the drop-down list's behavior has been changed a little.

Before my fix,
Click the drop-down list, it will open, click again, it will close.

After my fix,
Click the drop-down list, it will alway open. User should click out-side the drop-down list to close it.

Here is my fix for your reference

    $('#host, #host_click').unbind().autocomplete({
    	source: pageName+'?action=ajax_hosts',
    	autoFocus: true,
    	minLength: 0,
    	select: function(event,ui) {
    		$('#host_id').val(ui.item.id);
    		callBack = $('#call_back').val();
    		if (callBack != 'undefined') {
    			eval(callBack);
    		} else if (typeof applyGraphFilter === 'function') {
    			applyGraphFilter();
    		} else {
    			applyFilter();
    		}
    	},
        close: function( event, ui ) {
            hostOpen = false;
        },
        open: function( event, ui ) {
            hostOpen = true;
        }
    }).addClass('ui-state-default ui-selectmenu-text').css('border', 'none').css('background-color', 'transparent');

    $('#host, #host_click').click(function() {
    	if (!hostOpen) {
            $('#host').autocomplete('option', 'minLength', 0).autocomplete('search', '');
    	} else {
            $('#host').autocomplete('close');
    	}
    });
@cigamit
Copy link
Member

cigamit commented Sep 21, 2019

We would prefer it if you could do a pull request for this. Thanks!

@cigamit
Copy link
Member

cigamit commented Sep 21, 2019

Never mind. I'm going to pull the logic from the dark theme, which works correctly.

cigamit added a commit that referenced this issue Sep 21, 2019
autocomplete drop-down list sometimes needs double click to open
@cigamit cigamit added bug Undesired behaviour resolved A fixed issue labels Sep 21, 2019
@cigamit cigamit added this to the v1.2.7 milestone Sep 21, 2019
@cigamit cigamit closed this as completed Sep 21, 2019
@ddb4github
Copy link
Contributor

Still double click after apply new main.js. Sent screen record to developer@cacti.net

@TheWitness
Copy link
Member

Jing, developer[s]@cacti.net

@ddb4github
Copy link
Contributor

Jing, developer[s]@cacti.net

Ha, just check gmail, addr correct, but "Message too large" 😥

@kim-fitness
Copy link
Contributor Author

The logic from the dark theme also has the same issue. But it is easy to fix. I'll do a pull request for it

cigamit pushed a commit that referenced this issue Sep 25, 2019
@cigamit
Copy link
Member

cigamit commented Sep 26, 2019

All fixed now.

@netniV netniV changed the title autocomplete drop-down list sometimes needs double click to open Drop down autocomplete lists do not always open as expected Sep 28, 2019
@github-actions github-actions bot locked and limited conversation to collaborators Jun 30, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Undesired behaviour resolved A fixed issue
Projects
None yet
Development

No branches or pull requests

4 participants