Plots2: Bug in the search input form in the navbar.

[Priyaraj17]

Please describe the problem (or idea)

Whenever we focus on the search input. A vertical blue line appears at the right. Take a look at this image to understand the problem

What did you expect to see that you didn't?

The line should be removed.

Please show us where to look

https://publiclab.org/
Focus on the search box.

What's your PublicLab.org username?

This can help us diagnose the issue:
priyaraj_17

Browser, version, and operating system

Many bugs are related to these -- please help us track it down and reproduce what you're seeing!
chrome
Version 90.0.4430.85
Ubuntu 20.04

---

Thank you!

Your help makes Public Lab better! We deeply appreciate your helping refine and improve this site.

To learn how to write really great issues, which increases the chances they'll be resolved, see:

https://publiclab.org/wiki/developers#Contributing+for+non-coders

[welcome[bot]]

Thanks for opening your first issue! This space is protected by our Code of Conduct - and we're here to help.
Please follow the issue template to help us help you 👍🎉😄
If you have screenshots or a gif to share demonstrating the issue, that's really helpful! 📸
Do join our Gitter channel for some brainstorming discussions.

[Elukoye]

Can I work on this @Priyaraj17 ?

[Priyaraj17]

@Elukoye sure go ahead. Let me know if you face any problem.

[Elukoye]

@Priyaraj17 thanks ,I will

[Elukoye]

Hi @Priyaraj17,
I had a look at this and realized that the blue line is coming from the data-focus-visible-added class
.

[Elukoye]

Therefore, i don't think it is a bug, let me know your thoughts. 🙂

[Priyaraj17]

Ohh, I see. Give me a couple of minutes @Elukoye

[Priyaraj17]

You are right, thank you for the effort. I apologise for this. I hope you didn't spend a lot of time on this.

[Elukoye]

No problem @Priyaraj17 🙂👍,maybe we could request for this issue to be closed by the mentors ?

[Priyaraj17]

Yeah sure. I will ask for their opinion.
Hey @cesswairimu should we close this issue?

[cesswairimu]

hi everyone, the above image I believe consists of two elements, the search field, and the search icon as a clickable button....I wouldn't say its a bug because we meant it to be like that...what you could do @Elukoye @Priyaraj17 you could come up with a mockup of how you would like to improve that section and then we can discuss from there...in the meantime I will label this as "enhancement" ..what do you both think?
Thanks all

[Priyaraj17]

Yeah sure. I will ask for their opinion.

I think it's a nice idea. We can definitely come up with a solution.

[waridrox]

How about changing the focus state border box shadow style to reflect inside the input field 🙂...That way the user is able to see the border focus shadow clearly which the current search box is unable to achieve due to a dark background around the input field:

This could be achieved by simply adding the inset keyword for box shadow under focus state.

[Priyaraj17]

@waridrox hey, I prefer this over the current one. Let's see what the mentors have to say and also @Elukoye what do you think?

[Elukoye]

@Priyaraj17 ,@waridrox ,I like what @waridrox suggested but I think the box shadowing should be around the border of the input ,like below

[Priyaraj17]

Both of them are good. But, I prefer @waridrox's suggestion. Let's see what others have to say.

[Elukoye]

Ok then shall I implement @waridrox 's suggestion?

[Elukoye]

@cesswairimu ? @jywarren ?

[Priyaraj17]

@Elukoye Hey, I think they are busy. Maybe you can start working on it. In fact, you can try your suggestion.

[waridrox]

Hi all sorry for the delay 😅, I thought we were just brainstorming here for the ideas...maybe we could try implementing both the ideas and see which one suites better ? It's just a matter of applying the styles to the search box once we find where it lies in the codebase 👍

[Priyaraj17]

Hi all sorry for the delay , I thought we were just brainstorming here for the ideas...maybe we could try implementing both the ideas and see which one suites better ? It's just a matter of applying the styles to the search box once we find where it lies in the codebase

Yeah. Sure. I like this idea. We can compare which one looks better.

[Elukoye]

@Priyaraj17 ,@waridrox I already started playing around with it and I realized that what I suggested was the default Bootstrap style. Also as @cesswairimu said ,the bootstrap implementation involves 2 buttons. I have seen that some of the files ,they have used inline styling. So was wondering if I could override the default style with inline css.
What do u think @waridrox ,since u suggested adding keyword inset to the box shadow property.
Am going to work on this and hopefully have a sample by tomorrow.

[Elukoye]

@Priyaraj17 ,the code is in the views folder , layouts sub folder ,header partial ,line 20.

[waridrox]

@Elukoye, I think it's not possible to deal with pseudo classes like :focus using inline CSS 😅. Either we need to use the <style> tag or we can apply the styles in the file app/assets/stylesheets/styles.css and see if that works.

[Priyaraj17]

@Elukoye Thank you. I will also take a look into it. I think @waridrox it's better if we apply the styles in app/assets/stylesheets/styles.css.

[Elukoye]

@Priyaraj17 ,@waridrox what about simply adjusting the color of the navbar ? To make it lighter or blend in nicely with bootstraps light blue focus on the input's border ?

[Priyaraj17]

@Elukoye this sounds good. It think it will look nice.

[waridrox]

@Priyaraj17 @Elukoye, any updates ?? I tried my option -

What do you think ? @Elukoye pls share your solution as well so that we can finally come upon a decision...

[Priyaraj17]

@waridrox Thanks for sharing your approach. This looks good. I think we should close this issue today, @Elukoye what do you think?

[Elukoye]

@Priyaraj17 ,@waridrox looks good . Thanks for sharing ,yes we can close this

[Priyaraj17]

@waridrox Can you please make the PR?