Add Team Member || Modal is not visible after clicking on Add button

[vikasrohit]

Expected behavior

Modal is opened at the bottom of the team members list which makes it not visible to the user if the list of the members is long enough to have its last element below the bottom of the viewport.

Actual behavior

Modal should be visible or user should be scrolled to the end of the list automatically after clicking on the Add Team Member button. If page can be scrolled such that the modal comes the place where the '+' button was clicked, page should be scrolled otherwise no need to scroll because that means that the modal is already visible on the page.
Further, the text box in the Add Team Member modal should be focused after user clicks on the add button (represented as '+')

Steps to reproduce the problem

• Login to the application with a role which allows you to add team members
• Go to a project, which has sufficiently long list of members e.g. 273 in dev environment
• Click on the "+" button to open the modal for adding a new team member

Screenshot/screencast

-- https://connectv2.topcoder-dev.com/projects/273

Environment

• OS: Any
• Browser (w/version): Any
• User role (client, copilot or manager): Client or Manager
• Account used: N/A

[vikasrohit]

cc: @fnisen

[fnisen]

Thanks @vikasrohit. Made one change to requirement: modal should not be opened at the top; that's not per design.

[vikasrohit]

@fnisen I have updated the requirement further to have the cursor focused in the modal text box so that user doesn't need to make one more click to get started with searching members.

[vikasrohit]

Finally, found working solution from the challenge. Merged and deployed changes into dev.