Develop Reference

Auto selection when website load (using react)

so everytime I load the website for the first time, there is a selection box in the menu and I do not have an idea from where is coming from.
I am using react and react burger menu https://www.npmjs.com/package/react-burger-menu
I upload a picture to show you.
Here is just a sandbox with bad design but I manage to reproduce the error.
The error comes when I use the option isOpen={true}
Every time I reload the page, you can see there is a selection at the start.
https://codesandbox.io/s/lively-dawn-gqtqjv?file=/src/App.js
Thanks for your help and hope my question is not that weird or bad.
I tried with css selector to undo this but nothing works.

According to the document, you can disable the autoFocus by
<Menu disableAutoFocus />
Please refer to Focusing the first menu item: https://www.npmjs.com/package/react-burger-menu
Example code based on your codesandbox: https://codesandbox.io/s/sharp-herschel-15wrd2?file=/src/App.js

Yes I got your issue, basically focus selector outline property is active for 'a' tag you can solve that issue by adding following css snippet in style.css(I tested it & perfectly work on your provided problem)

Unable to click on Material UI Select using WebdriverIO

I want to know if there is any way to click on a hidden element using Webdriverio
One of the components used in our project is material-ui select. I can see that it is hidden when rendered on the page, like below. When I click on it using browser.click('#fileName') in javascript, I am getting an error message as element not visible.
Just wanted to check if there is any way to click on this hidden element from Webdriverio. Our developers are currently looking into implementing native select if I couldn't find anyway to get it working.
Writing it here to see if anyone else faced this problem and has worked around it, if yes, can you please share with me about how you overcome this?
Thanks in advance.
Edit1:
Image of the ui

Mentio JS menu being added to bottom of the page

I'm trying to implement a Twitter style #mention interface using Angular JS and a library called MentioJS ()
The issue i'm having, is that after content is dynamically added to the page, I'm getting a rogue menu on the bottom of the page. I was able to replicate on the documentation page here:
http://jeff-collins.github.io/ment.io/?#/
By just hitting "Submit" at the bottom without changing anything. In Chrome, I see the default menu that opens in the first input show up again at the bottom of the page.
Any ideas why this might be happening?

I've encountered the same issue, as many others I think.
I've emptyed the array with the options for mentio-items (after pressing submit), which worked for me.
I`m sure this is not the right solution, but it fullfiels my needs.

I had the same issue with with ment.io, but as #Mihai Lazar pointed out after clearing array on submit, issue was resolved.
Regards..

Adding DIV's inside modal dialog HTML5

I tried to google but didnt find exactly I am looking for.
I need a sample example code or a resource link to create a modal dialog box and I want to have two boxes(div's) inside the dialog box.
I have to insert different content inside both the boxes(inside the dialog box) when the user clicks.
I know how to create a dialog box but, I would like to particularly know how to insert divs inside it.
I hope my question is clear. Please help.

If you just want to look at the code have a look at the work section of http://www.pixelvalet.com (ok! its my website but then it would help you right?).
The way i approached the issue is:
first i added the template (all the empty divs i needed which i would be populating later on) in the main html file itself
next i gave it a hidden css style to the parent which contained all the divs.
then i added a logic which would tell the browser the which link was clicked and then it would populate the divs in the template appropriately using ajax
it would then slowly fade in using jQuery
but then this isnt the only way you might do this. There are tons of plugins out there which help you create a modal box. but i opted for this route because i wanted it completely customised.
hope it helps.

I have used bootstrap modal for dialog box it works great you check it here:
http://getbootstrap.com/javascript/#modals
The basic idea is just put your dialog box code at bottom of you page,
<div id="my_dialog">
content
</div>
And you detach it in your jquery or other framework you are using or just pure js.
In jquery you can do this:
var my_dialog = $( "#my_dialog" ).detach();
now when ever you need to show it you just attach it to where you want to show it.
and before you attach it you can insert any content you want.
But I would suggest you to use bootstrap's modal much easier.

Display Image on mouse-on hover

I am having this application where I need to have something like, when we bring the mouse over an employee's name, which is an actionlink , it is suppose to show the employee's image.
I am trying to do so using MVC, but am till far unable to do so.
Please can anyone help me out in this..
Thanks in advance for help.

This is a JavaScript thing, not an ASP.NET MVC thing. You'll take one of two approaches:
Put the image on page at load, but give it a class or otherwise style it to be hidden initially. Then you'll just need to add an JS event handler for the mouseover event of your links that will cause the image to display.
Again, you'll use a JS event handler tied to the mouseover event of your links, but you send an AJAX request for the image URL and then dynamically insert the image into the page based on the response. This is kind of overkill for something this simple though.
#1 is really the best way to go for this use case, and there's probably around 10 million articles, blog posts, tutorials, etc. online regarding hiding and showing content based on a JS event. Google your heart out.