diff --git a/web/ASC.Web.Components/src/components/advanced-selector/advanced-selector.stories.js b/web/ASC.Web.Components/src/components/advanced-selector/advanced-selector.stories.js
index 369db005e4..44e64daf3f 100644
--- a/web/ASC.Web.Components/src/components/advanced-selector/advanced-selector.stories.js
+++ b/web/ASC.Web.Components/src/components/advanced-selector/advanced-selector.stories.js
@@ -1,190 +1,193 @@
 /* eslint-disable react/prop-types */
 import React from "react";
 import { storiesOf } from "@storybook/react";
-import { action } from '@storybook/addon-actions';
-import { withKnobs, text, number, boolean, select } from "@storybook/addon-knobs/react";
+import { action } from "@storybook/addon-actions";
+import {
+  withKnobs,
+  text,
+  number,
+  boolean,
+  select
+} from "@storybook/addon-knobs/react";
 import withReadme from "storybook-readme/with-readme";
 import Readme from "./README.md";
 import AdvancedSelector from "./";
 import Section from "../../../.storybook/decorators/section";
-import { BooleanValue } from "react-values";
 import Button from "../button";
 import { isEqual, slice } from "lodash";
 import { name } from "faker";
-//import ADSelectorMainBody from "./sub-components/sections/main/body";
-import { FixedSizeList as List } from "react-window";
-import InfiniteLoader from "react-window-infinite-loader";
-import Loader from "../loader";
-import { Text } from "../text";
-import CustomScrollbarsVirtualList from "../scrollbar/custom-scrollbars-virtual-list";
-import ADSelectorMainBody from "./sub-components/sections/main/body";
 
 function getRandomInt(min, max) {
   return Math.floor(Math.random() * (max - min)) + min;
 }
-
-const groups = [
-  {
-    key: "group-all",
-    label: "All groups",
-    total: 0
-  },
-  {
-    key: "group-dev",
-    label: "Development",
-    total: 0
-  },
-  {
-    key: "group-management",
-    label: "Management",
-    total: 0
-  },
-  {
-    key: "group-marketing",
-    label: "Marketing",
-    total: 0
-  },
-  {
-    key: "group-mobile",
-    label: "Mobile",
-    total: 0
-  },
-  {
-    key: "group-support",
-    label: "Support",
-    total: 0
-  },
-  {
-    key: "group-web",
-    label: "Web",
-    total: 0
-  },
-  {
-    key: "group-1",
-    label: "Group1",
-    total: 0
-  },
-  {
-    key: "group-2",
-    label: "Group2",
-    total: 0
-  },
-  {
-    key: "group-3",
-    label: "Group3",
-    total: 0
-  },
-  {
-    key: "group-4",
-    label: "Group4",
-    total: 0
-  },
-  {
-    key: "group-5",
-    label: "Group5",
-    total: 0
-  }
-];
-
 const sizes = ["compact", "full"];
-const displayTypes = ['dropdown', 'aside'];
+const displayTypes = ["dropdown", "aside"];
 
 class ADSelectorExample extends React.Component {
   constructor(props) {
     super(props);
 
-    const { total, isOpen } = props;
+    const { isOpen, total } = props;
 
-    this.state = {
+    const groups = this.generateGroups();
+    const users = this.generateUsers(total, groups);
+
+    this.state = this.getDefaultState(isOpen, groups, users);
+  }
+
+  getDefaultState = (isOpen, groups, allOptions) => {
+    return {
       isOpen: isOpen,
+      allOptions,
       options: [],
+      groups,
       hasNextPage: true,
       isNextPageLoading: false
-    }
+    };
+  };
 
-    this.AllOptions = Array.from({ length: total }, (v, index) => {
+  generateGroups = () => {
+    return [
+      {
+        key: "group-all",
+        label: "All groups",
+        total: 0
+      },
+      {
+        key: "group-dev",
+        label: "Development",
+        total: 0
+      },
+      {
+        key: "group-management",
+        label: "Management",
+        total: 0
+      },
+      {
+        key: "group-marketing",
+        label: "Marketing",
+        total: 0
+      },
+      {
+        key: "group-mobile",
+        label: "Mobile",
+        total: 0
+      },
+      {
+        key: "group-support",
+        label: "Support",
+        total: 0
+      },
+      {
+        key: "group-web",
+        label: "Web",
+        total: 0
+      }
+    ];
+  };
+
+  generateUsers = (count, groups) => {
+    return Array.from({ length: count }, (v, index) => {
       const additional_group = groups[getRandomInt(1, 6)];
       groups[0].total++;
       additional_group.total++;
       return {
         key: `user${index}`,
         groups: ["group-all", additional_group.key],
-        label: `User${index} ${name.findName()}`
+        label: `${name.findName()} (User${index})`
       };
     });
-  }
+  };
 
   loadNextPage = (startIndex, stopIndex) => {
-    console.log(`loadNextPage(startIndex=${startIndex}, stopIndex=${stopIndex})`);
+    console.log(
+      `loadNextPage(startIndex=${startIndex}, stopIndex=${stopIndex})`
+    );
     this.setState({ isNextPageLoading: true }, () => {
       setTimeout(() => {
         const { options } = this.state;
-        const newOptions = [...options].concat(slice(this.AllOptions, startIndex, startIndex+100))
+        const newOptions = [...options].concat(
+          slice(this.state.allOptions, startIndex, startIndex + 100)
+        );
 
         this.setState({
           hasNextPage: newOptions.length < this.props.total,
           isNextPageLoading: false,
           options: newOptions
         });
-
-      }, 2500);
+      }, 500);
     });
   };
 
   componentDidUpdate(prevProps) {
-    const {total, options, isOpen} = this.props;
-    if(!isEqual(prevProps.options, options))
-    {
+    const { total, options, isOpen } = this.props;
+    if (!isEqual(prevProps.options, options)) {
       this.setState({
         options: options
       });
     }
 
-    if(isOpen !== prevProps.isOpen) {
+    if (isOpen !== prevProps.isOpen) {
       this.setState({
         isOpen: isOpen
       });
     }
 
-    if(total !== prevProps.total) {
-      this.setState({
-        total: total,
-        option: []
-      });
+    if (total !== prevProps.total) {
+      const groups = this.generateGroups();
+      const users = this.generateUsers(total, groups);
+      this.setState(this.getDefaultState(isOpen, groups, users));
     }
   }
 
-  render() {
-    const { isOpen, options, hasNextPage, isNextPageLoading } = this.state;
-    return (
-      <AdvancedSelector
-        options={options}
-        hasNextPage={hasNextPage} 
-        isNextPageLoading={isNextPageLoading}
-        loadNextPage={this.loadNextPage}
+  toggle = () => {
+    this.setState({
+      isOpen: !this.state.isOpen
+    });
+  };
 
-        size={select("size", sizes, "full")}
-        placeholder={text("placeholder", "Search users")}
-        onSearchChanged={value => {
-          action("onSearchChanged")(value);
-          /*set(
+  render() {
+    const {
+      isOpen,
+      options,
+      groups,
+      selectedOptions,
+      selectedGroups,
+      hasNextPage,
+      isNextPageLoading
+    } = this.state;
+    return (
+      <div style={{position: 'relative'}}>
+        <Button label="Toggle dropdown" onClick={this.toggle} />
+        <AdvancedSelector
+          options={options}
+          selectedOptions={selectedOptions}
+          hasNextPage={hasNextPage}
+          isNextPageLoading={isNextPageLoading}
+          loadNextPage={this.loadNextPage}
+          size={select("size", sizes, "full")}
+          placeholder={text("placeholder", "Search users")}
+          onSearchChanged={value => {
+            action("onSearchChanged")(value);
+            /*set(
             options.filter(option => {
               return option.label.indexOf(value) > -1;
             })
           );*/
-        }}
-        groups={groups}
-        selectedGroups={[groups[0]]}
-        isMultiSelect={boolean("isMultiSelect", true)}
-        buttonLabel={text("buttonLabel", "Add members")}
-        selectAllLabel={text("selectAllLabel", "Select all")}
-        onSelect={selectedOptions => {
-          action("onSelect")(selectedOptions);
-          //toggle();
-        }}
-        //onCancel={toggle}
-        onChangeGroup={group => {
-          /*set(
+          }}
+          groups={groups}
+          selectedGroups={selectedGroups}
+          isMultiSelect={boolean("isMultiSelect", true)}
+          buttonLabel={text("buttonLabel", "Add members")}
+          selectAllLabel={text("selectAllLabel", "Select all")}
+          onSelect={selectedOptions => {
+            action("onSelect")(selectedOptions);
+            this.toggle();
+          }}
+          //onCancel={toggle}
+          onGroupSelect={selectedGroups => {
+            action("onGroupSelect")(selectedGroups);
+            /*set(
             options.filter(option => {
               return (
                 option.groups &&
@@ -193,71 +196,25 @@ class ADSelectorExample extends React.Component {
               );
             })
           );*/
-        }}
-        allowCreation={boolean("allowCreation", false)}
-        onAddNewClick={() => action("onSelect") }
-        isOpen={isOpen}
-        displayType={select("displayType", displayTypes, "dropdown")}
-      />
-    );
-  }
-
-}
-
-class MainListExample extends React.PureComponent {
-  constructor(props) {
-    super(props);
-
-    this.AllOptions = Array.from({ length: props.total }, (v, index) => {
-      const additional_group = groups[getRandomInt(1, 6)];
-      groups[0].total++;
-      additional_group.total++;
-      return {
-        key: `user${index}`,
-        groups: ["group-all", additional_group.key],
-        label: `User${index} ${name.findName()}`
-      };
-    });
-  }
-
-  state = {
-    hasNextPage: true,
-    isNextPageLoading: false,
-    options: []
-  };
-
-  loadNextPage = (startIndex, stopIndex) => {
-    console.log(`loadNextPage(startIndex=${startIndex}, stopIndex=${stopIndex})`);
-    this.setState({ isNextPageLoading: true }, () => {
-      setTimeout(() => {
-        const { options } = this.state;
-        const newOptions = [...options].concat(slice(this.AllOptions, startIndex, startIndex+100))
-
-        this.setState({
-          hasNextPage: newOptions.length < this.props.total,
-          isNextPageLoading: false,
-          options: newOptions
-        });
-
-      }, 2500);
-    });
-  };
-
-  render() {
-    const { hasNextPage, isNextPageLoading, options } = this.state;
-
-    return (
-      <ADSelectorMainBody 
-        options={options}
-        hasNextPage={hasNextPage} 
-        isNextPageLoading={isNextPageLoading}
-        loadNextPage={this.loadNextPage}
-        listHeight={488}
-        listWidth={356}
-        itemHeight={32}
-        onRowChecked={(option) => console.log("onRowChecked", option)}
-        onRowSelect={(option) => console.log("onRowSelect", option)}
-      />
+          }}
+          onGroupChange={group => {
+            action("onGroupChange")(group);
+            /*set(
+            options.filter(option => {
+              return (
+                option.groups &&
+                option.groups.length > 0 &&
+                option.groups.indexOf(group.key) > -1
+              );
+            })
+          );*/
+          }}
+          allowCreation={boolean("allowCreation", false)}
+          onAddNewClick={() => action("onSelect")}
+          isOpen={isOpen}
+          displayType={select("displayType", displayTypes, "dropdown")}
+        />
+      </div>
     );
   }
 }
@@ -268,24 +225,7 @@ storiesOf("Components|AdvancedSelector", module)
   .add("base", () => {
     return (
       <Section>
-        <BooleanValue
-          defaultValue={true}
-          onChange={() => action("isOpen changed")}
-        >
-          {({ value: isOpen, toggle }) => (
-            <div style={{position: "relative"}}>
-              <Button label="Toggle dropdown" onClick={toggle} />
-              <ADSelectorExample isOpen={isOpen} total={number("Users count", 1000)} />
-            </div>
-          )}
-        </BooleanValue>
-      </Section>
-    );
-  })
-  .add("list only", () => {
-    return (
-      <Section>
-        <MainListExample total={number("Users count", 1000)} />
+        <ADSelectorExample total={number("Users count", 10000)} />
       </Section>
     );
   });
diff --git a/web/ASC.Web.Components/src/components/advanced-selector/index.js b/web/ASC.Web.Components/src/components/advanced-selector/index.js
index 6d0821a813..6cc8381338 100644
--- a/web/ASC.Web.Components/src/components/advanced-selector/index.js
+++ b/web/ASC.Web.Components/src/components/advanced-selector/index.js
@@ -5,6 +5,7 @@ import Aside from "../layout/sub-components/aside";
 import ADSelectorBody from "./sub-components/body";
 
 const displayTypes = ["dropdown", "aside"];
+const sizes = ["compact", "full"];
 
 class AdvancedSelector extends React.Component {
   render() {
@@ -24,30 +25,35 @@ class AdvancedSelector extends React.Component {
 }
 
 AdvancedSelector.propTypes = {
-  value: PropTypes.string,
-  placeholder: PropTypes.string,
-  isMultiSelect: PropTypes.bool,
-  size: PropTypes.oneOf(["compact", "full"]),
-  maxHeight: PropTypes.number,
-  isDisabled: PropTypes.bool,
-  onSearchChanged: PropTypes.func,
   options: PropTypes.array,
   selectedOptions: PropTypes.array,
   groups: PropTypes.array,
   selectedGroups: PropTypes.array,
-  selectedAll: PropTypes.bool,
+
+  value: PropTypes.string,
+  placeholder: PropTypes.string,
   selectAllLabel: PropTypes.string,
   buttonLabel: PropTypes.string,
-  onSelect: PropTypes.func,
-  onChangeGroup: PropTypes.func,
-  onCancel: PropTypes.func,
+
+  size: PropTypes.oneOf(sizes),
+  displayType: PropTypes.oneOf(displayTypes),
+
+  maxHeight: PropTypes.number,
+
+  isMultiSelect: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  selectedAll: PropTypes.bool,
   isOpen: PropTypes.bool,
   allowCreation: PropTypes.bool,
-  onAddNewClick: PropTypes.func,
   allowAnyClickClose: PropTypes.bool,
-  displayType: PropTypes.oneOf(displayTypes),
   hasNextPage: PropTypes.bool,
   isNextPageLoading: PropTypes.bool,
+
+  onSearchChanged: PropTypes.func,
+  onSelect: PropTypes.func,
+  onGroupChange: PropTypes.func,
+  onCancel: PropTypes.func,
+  onAddNewClick: PropTypes.func,
   loadNextPage: PropTypes.func,
 };
 
diff --git a/web/ASC.Web.Components/src/components/advanced-selector/sub-components/body.js b/web/ASC.Web.Components/src/components/advanced-selector/sub-components/body.js
index d0f002fa5b..42360052bf 100644
--- a/web/ASC.Web.Components/src/components/advanced-selector/sub-components/body.js
+++ b/web/ASC.Web.Components/src/components/advanced-selector/sub-components/body.js
@@ -1,12 +1,9 @@
 import React from "react";
 import PropTypes from "prop-types";
 import styled, { css } from "styled-components";
-import CustomScrollbarsVirtualList from "../../scrollbar/custom-scrollbars-virtual-list";
-import { FixedSizeList } from "react-window";
 import Checkbox from "../../checkbox";
 
 import ComboBox from "../../combobox";
-import { Text } from "../../text";
 
 import filter from "lodash/filter";
 import isEqual from "lodash/isEqual";
@@ -23,33 +20,34 @@ import ADSelectorAdditionalBody from "./sections/additional/body";
 /* eslint-disable no-unused-vars */
 /* eslint-disable react/prop-types */
 const Container = ({
-    value,
-    placeholder,
-    isMultiSelect,
-    size,
-    width,
-    maxHeight,
-    isDisabled,
-    onSelect,
-    onSearchChanged,
-    options,
-    selectedOptions,
-    buttonLabel,
-    selectAllLabel,
-    groups,
-    selectedGroups,
-    onChangeGroup,
-    isOpen,
-    displayType,
-    containerWidth,
-    containerHeight,
-    allowCreation,
-    onAddNewClick,
-    allowAnyClickClose,
-    hasNextPage,
-    isNextPageLoading,
-    loadNextPage,
-    ...props
+  value,
+  placeholder,
+  isMultiSelect,
+  size,
+  width,
+  maxHeight,
+  isDisabled,
+  onSelect,
+  onSearchChanged,
+  options,
+  selectedOptions,
+  buttonLabel,
+  selectAllLabel,
+  groups,
+  selectedGroups,
+  onGroupSelect,
+  onGroupChange,
+  isOpen,
+  displayType,
+  containerWidth,
+  containerHeight,
+  allowCreation,
+  onAddNewClick,
+  allowAnyClickClose,
+  hasNextPage,
+  isNextPageLoading,
+  loadNextPage,
+  ...props
 }) => <div {...props} />;
 /* eslint-enable react/prop-types */
 /* eslint-enable no-unused-vars */
@@ -73,13 +71,13 @@ const StyledBodyContainer = styled(Container)`
         width: 100%;
 
         ${props =>
-        props.displayType === "dropdown" &&
-        props.size === "full" &&
-        css`
+          props.displayType === "dropdown" &&
+          props.size === "full" &&
+          css`
             margin-right: ${props => (props.allowCreation ? 8 : 16)}px;
           `}
         /*${props =>
-        props.allowCreation
+          props.allowCreation
             ? css`
                 width: 272px;
                 margin-right: 8px;
@@ -91,8 +89,8 @@ const StyledBodyContainer = styled(Container)`
 
       .add_new_btn {
         ${props =>
-        props.allowCreation &&
-        css`
+          props.allowCreation &&
+          css`
             display: inline-block;
             vertical-align: top;
             height: 32px;
@@ -110,14 +108,15 @@ const StyledBodyContainer = styled(Container)`
 
     .data_column_one {
       ${props =>
+        props.size === "full" &&
         props.displayType === "dropdown" &&
-            props.groups &&
-            props.groups.length > 0
-            ? css`
+        props.groups &&
+        props.groups.length > 0
+          ? css`
               width: 50%;
               display: inline-block;
             `
-            : ""}
+          : ""}
 
       .options_list {
         margin-top: 4px;
@@ -145,14 +144,14 @@ const StyledBodyContainer = styled(Container)`
     .data_column_two {
       ${props =>
         props.displayType === "dropdown" &&
-            props.groups &&
-            props.groups.length > 0
-            ? css`
+        props.groups &&
+        props.groups.length > 0
+          ? css`
               width: 50%;
               display: inline-block;
               border-left: 1px solid #eceef1;
             `
-            : ""}
+          : ""}
 
       .group_header {
         font-weight: 600;
@@ -195,280 +194,334 @@ const StyledBodyContainer = styled(Container)`
 `;
 
 class ADSelectorBody extends React.Component {
-    constructor(props) {
-        super(props);
+  constructor(props) {
+    super(props);
 
-        this.ref = React.createRef();
+    this.ref = React.createRef();
 
-        const groups = this.convertGroups(this.props.groups);
-        const currentGroup = this.getCurrentGroup(groups);
+    const { groups, selectedOptions, selectedGroups, selectedAll, isOpen } = props;
 
-        this.state = {
-            selectedOptions: this.props.selectedOptions || [],
-            selectedAll: this.props.selectedAll || false,
-            groups: groups,
-            currentGroup: currentGroup
-        };
+    const convertedGroups = this.convertGroups(groups);
+    const currentGroup = this.getCurrentGroup(convertedGroups);
 
-        if (props.isOpen) handleAnyClick(true, this.handleClick);
+    this.state = {
+      selectedOptions: selectedOptions || [],
+      selectedAll: selectedAll || false,
+      groups: convertedGroups,
+      selectedGroups: selectedGroups || [],
+      currentGroup: currentGroup
+    };
+
+    if (isOpen) handleAnyClick(true, this.handleClick);
+  }
+
+  handleClick = e => {
+    const { onCancel, allowAnyClickClose, isOpen } = this.props;
+
+    if (
+      isOpen &&
+      allowAnyClickClose &&
+      this.ref &&
+      this.ref.current &&
+      !this.ref.current.contains(e.target) &&
+      e &&
+      e.target &&
+      e.target.className &&
+      typeof e.target.className.indexOf === "function" &&
+      e.target.className.indexOf("option_checkbox") === -1
+    ) {
+      onCancel && onCancel();
+    }
+  };
+
+  componentWillUnmount() {
+    handleAnyClick(false, this.handleClick);
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    return !isEqual(this.props, nextProps) || !isEqual(this.state, nextState);
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      groups,
+      selectedAll,
+      isMultiSelect,
+      selectedOptions,
+      selectedGroups,
+      allowAnyClickClose,
+      isOpen
+    } = this.props;
+
+    if (isOpen !== prevProps.isOpen) {
+      handleAnyClick(isOpen, this.handleClick);
     }
 
-    handleClick = e => {
-        if (
-            this.props.isOpen &&
-            this.props.allowAnyClickClose &&
-            this.ref &&
-            this.ref.current &&
-            !this.ref.current.contains(e.target) &&
-            e &&
-            e.target &&
-            e.target.className &&
-            typeof e.target.className.indexOf === "function" &&
-            e.target.className.indexOf("option_checkbox") === -1
-        ) {
-            this.props.onCancel && this.props.onCancel();
-        }
-    };
-
-    componentWillUnmount() {
-        handleAnyClick(false, this.handleClick);
+    if (allowAnyClickClose !== prevProps.allowAnyClickClose) {
+      handleAnyClick(allowAnyClickClose, this.handleClick);
     }
 
-    shouldComponentUpdate(nextProps, nextState) {
-        return !isEqual(this.props, nextProps) || !isEqual(this.state, nextState);
+    let newState = {};
+
+    if (!isEqual(selectedOptions, prevProps.selectedOptions)) {
+      newState = { selectedOptions };
     }
 
-    componentDidUpdate(prevProps) {
-        if (this.props.isOpen !== prevProps.isOpen) {
-            handleAnyClick(this.props.isOpen, this.handleClick);
-        }
-
-        if (this.props.allowAnyClickClose !== prevProps.allowAnyClickClose) {
-            handleAnyClick(this.props.allowAnyClickClose, this.handleClick);
-        }
-
-        let newState = {};
-
-        if (!isEqual(this.props.selectedOptions, prevProps.selectedOptions)) {
-            newState = { selectedOptions: this.props.selectedOptions };
-        }
-
-        if (this.props.isMultiSelect !== prevProps.isMultiSelect) {
-            newState = Object.assign({}, newState, {
-                selectedOptions: []
-            });
-        }
-
-        if (this.props.selectedAll !== prevProps.selectedAll) {
-            newState = Object.assign({}, newState, {
-                selectedAll: this.props.selectedAll
-            });
-        }
-
-        if (!isEqual(this.props.groups, prevProps.groups)) {
-            const groups = this.convertGroups(this.props.groups);
-            const currentGroup = this.getCurrentGroup(groups);
-            newState = Object.assign({}, newState, {
-                groups,
-                currentGroup
-            });
-        }
-
-        if (!isEmpty(newState)) {
-            this.setState({ ...this.state, ...newState });
-        }
+    if (!isEqual(selectedGroups, prevProps.selectedGroups)) {
+      newState = Object.assign({}, newState, { selectedGroups });
+    }
+    if (isMultiSelect !== prevProps.isMultiSelect) {
+      newState = Object.assign({}, newState, {
+        selectedOptions: []
+      });
     }
 
-    convertGroups = groups => {
-        if (!groups) return [];
-
-        const wrappedGroups = groups.map(this.convertGroup);
-
-        return wrappedGroups;
-    };
-
-    convertGroup = group => {
-        return {
-            key: group.key,
-            label: `${group.label} (${group.total})`,
-            total: group.total
-        };
-    };
-
-    getCurrentGroup = groups => {
-        const currentGroup = groups.length > 0 ? groups[0] : "No groups";
-        return currentGroup;
-    };
-
-    onButtonClick = () => {
-        this.props.onSelect &&
-            this.props.onSelect(
-                this.state.selectedAll ? this.props.options : this.state.selectedOptions
-            );
-    };
-
-    onSelect = option => {
-        this.props.onSelect && this.props.onSelect(option);
-    };
-
-    onChange = (option, e) => {
-        const { selectedOptions } = this.state;
-        const newSelectedOptions = e.target.checked
-            ? [...selectedOptions, option]
-            : filter(selectedOptions, obj => obj.key !== option.key);
-
-        //console.log("onChange", option, e.target.checked, newSelectedOptions);
-
-        this.setState({
-            selectedOptions: newSelectedOptions,
-            selectedAll: newSelectedOptions.length === this.props.options.length
-        });
-    };
-
-    onSelectedAllChange = e => {
-        this.setState({
-            selectedAll: e.target.checked,
-            selectedOptions: e.target.checked ? this.props.options : []
-        });
-    };
-
-    onCurrentGroupChange = group => {
-        this.setState({
-            currentGroup: group
-        });
-
-        this.props.onChangeGroup && this.props.onChangeGroup(group);
-    };
-
-    render() {
-
-        const {
-            options,
-            hasNextPage,
-            isNextPageLoading,
-            loadNextPage,
-            value,
-            placeholder,
-            isDisabled,
-            onSearchChanged,
-            isMultiSelect,
-            buttonLabel,
-            selectAllLabel,
-            size,
-            displayType,
-            onAddNewClick,
-            allowCreation
-        } = this.props;
-
-        const { selectedOptions, selectedAll, currentGroup, groups } = this.state;
-
-        let containerHeight;
-        let containerWidth;
-        let listHeight;
-        let listWidth;
-        const itemHeight = 32;
-        const hasGroups = groups && groups.length > 0;
-
-        switch (size) {
-            case "compact":
-                containerHeight = hasGroups ? "326px" : "100%";
-                containerWidth = "379px";
-                listWidth = displayType === "dropdown" ? 356 : 356;
-                listHeight = hasGroups ? 488 : isMultiSelect ? 176 : 226;
-                break;
-            case "full":
-            default:
-                containerHeight = "100%";
-                containerWidth = displayType === "dropdown" ? "690px" : "326px";
-                listWidth = displayType === "dropdown" ? 320 : 302;
-                listHeight = 488;
-                break;
-        }
-
-        // If there are more items to be loaded then add an extra row to hold a loading indicator.
-        //const itemCount = hasNextPage ? options.length + 1 : options.length;
-
-        return (
-            <StyledBodyContainer
-                containerHeight={containerHeight}
-                containerWidth={containerWidth}
-                {...this.props}
-            >
-                <div ref={this.ref}>
-                    <div className="data_container">
-                        <div className="data_column_one">
-                            <ADSelectorMainHeader
-                                value={value}
-                                searchPlaceHolder={placeholder}
-                                isDisabled={isDisabled}
-                                allowCreation={allowCreation}
-                                onAddNewClick={onAddNewClick}
-                                onChange={onSearchChanged}
-                                onClearSearch={onSearchChanged.bind(this, "")}
-                            />
-                            {displayType === "aside" && groups && groups.length > 0 && (
-                                <ComboBox
-                                    className="options_group_selector"
-                                    isDisabled={isDisabled}
-                                    options={groups}
-                                    selectedOption={currentGroup}
-                                    dropDownMaxHeight={200}
-                                    scaled={true}
-                                    scaledOptions={true}
-                                    size="content"
-                                    onSelect={this.onCurrentGroupChange}
-                                />
-                            )}
-                            {isMultiSelect && !groups && !groups.length && (
-                                <Checkbox
-                                    label={selectAllLabel}
-                                    isChecked={
-                                        selectedAll || selectedOptions.length === options.length
-                                    }
-                                    isIndeterminate={!selectedAll && selectedOptions.length > 0}
-                                    className="option_select_all_checkbox"
-                                    onChange={this.onSelectedAllChange}
-                                />
-                            )}
-                            <ADSelectorMainBody
-                                options={options}
-                                hasNextPage={hasNextPage}
-                                isNextPageLoading={isNextPageLoading}
-                                loadNextPage={loadNextPage}
-
-                                isMultiSelect={isMultiSelect}
-                                listHeight={listHeight}
-                                listWidth={listWidth}
-                                itemHeight={itemHeight}
-                                onRowChecked={this.onChange}
-                                onRowSelect={this.onSelect}
-                            />
-                        </div>
-                        {/* {displayType === "dropdown" &&
-                            size === "full" &&
-                            groups &&
-                            groups.length > 0 && (
-                                <ADSelectorAdditionalBody
-                                    height={listHeight}
-                                    itemSize={itemHeight}
-                                    groups={groups}
-                                />
-                            )} */}
-                    </div>
-                    {isMultiSelect && (
-                        <ADSelectorFooter
-                            buttonLabel={buttonLabel}
-                            isDisabled={
-                                !this.state.selectedOptions ||
-                                !this.state.selectedOptions.length
-                            }
-                            onClick={this.onButtonClick}
-                        />
-                    )}
-                </div>
-            </StyledBodyContainer>
-        );
+    if (selectedAll !== prevProps.selectedAll) {
+      newState = Object.assign({}, newState, {
+        selectedAll
+      });
     }
+
+    if (!isEqual(groups, prevProps.groups)) {
+      const newGroups = this.convertGroups(groups);
+      const currentGroup = this.getCurrentGroup(newGroups);
+      newState = Object.assign({}, newState, {
+        groups: newGroups,
+        currentGroup
+      });
+    }
+
+    if (!isEmpty(newState)) {
+      this.setState({ ...this.state, ...newState });
+    }
+  }
+
+  convertGroups = groups => {
+    if (!groups) return [];
+
+    const wrappedGroups = groups.map(this.convertGroup);
+
+    return wrappedGroups;
+  };
+
+  convertGroup = group => {
+    return {
+      key: group.key,
+      label: `${group.label} (${group.total})`,
+      total: group.total
+    };
+  };
+
+  getCurrentGroup = groups => {
+    const currentGroup = groups.length > 0 ? groups[0] : "No groups";
+    return currentGroup;
+  };
+
+  onButtonClick = () => {
+    this.props.onSelect &&
+      this.props.onSelect(
+        this.state.selectedAll ? this.props.options : this.state.selectedOptions
+      );
+  };
+
+  onSelectedAllChange = e => {
+    this.setState({
+      selectedAll: e.target.checked,
+      selectedOptions: e.target.checked ? this.props.options : []
+    });
+  };
+
+  onOptionSelect = option => {
+    this.props.onSelect && this.props.onSelect(option);
+  };
+
+  onOptionChange = (option, e) => {
+    const { selectedOptions } = this.state;
+    const newSelectedOptions = e.target.checked
+      ? [...selectedOptions, option]
+      : filter(selectedOptions, obj => obj.key !== option.key);
+
+    //console.log("onChange", option, e.target.checked, newSelectedOptions);
+
+    this.setState({
+      selectedOptions: newSelectedOptions,
+      selectedAll: newSelectedOptions.length === this.props.options.length
+    });
+  };
+
+  onGroupSelect = option => {
+    this.props.onGroupSelect && this.props.onGroupSelect(option);
+  };
+
+  onGroupChange = group => {
+    this.setState({
+      currentGroup: group
+    });
+
+    this.props.onGroupChange && this.props.onGroupChange(group);
+  };
+
+  render() {
+    const {
+      options,
+      hasNextPage,
+      isNextPageLoading,
+      loadNextPage,
+      value,
+      placeholder,
+      isDisabled,
+      onSearchChanged,
+      isMultiSelect,
+      buttonLabel,
+      selectAllLabel,
+      size,
+      displayType,
+      onAddNewClick,
+      allowCreation
+    } = this.props;
+
+    const { selectedOptions, selectedAll, currentGroup, groups, selectedGroups } = this.state;
+
+    let containerHeight;
+    let containerWidth;
+    let listHeight;
+    let listWidth;
+    const itemHeight = 32;
+    const hasGroups = groups && groups.length > 0;
+
+    switch (size) {
+      case "compact":
+        containerHeight = hasGroups ? "326px" : "100%";
+        containerWidth = "379px";
+        listWidth = displayType === "dropdown" ? 356 : 356;
+        listHeight = hasGroups ? 488 : isMultiSelect ? 176 : 226;
+        break;
+      case "full":
+      default:
+        containerHeight = "100%";
+        containerWidth = displayType === "dropdown" ? "690px" : "326px";
+        listWidth = displayType === "dropdown" ? 320 : 300;
+        listHeight = 488;
+        break;
+    }
+
+    // If there are more items to be loaded then add an extra row to hold a loading indicator.
+    //const itemCount = hasNextPage ? options.length + 1 : options.length;
+
+    return (
+      <StyledBodyContainer
+        containerHeight={containerHeight}
+        containerWidth={containerWidth}
+        {...this.props}
+      >
+        <div ref={this.ref}>
+          <div className="data_container">
+            <div className="data_column_one">
+              <ADSelectorMainHeader
+                value={value}
+                searchPlaceHolder={placeholder}
+                isDisabled={isDisabled}
+                allowCreation={allowCreation}
+                onAddNewClick={onAddNewClick}
+                onChange={onSearchChanged}
+                onClearSearch={onSearchChanged.bind(this, "")}
+              />
+              {displayType === "aside" && groups && groups.length > 0 && (
+                <ComboBox
+                  className="options_group_selector"
+                  isDisabled={isDisabled}
+                  options={groups}
+                  selectedOption={currentGroup}
+                  dropDownMaxHeight={200}
+                  scaled={true}
+                  scaledOptions={true}
+                  size="content"
+                  onSelect={this.onCurrentGroupChange}
+                />
+              )}
+              {isMultiSelect && !groups && !groups.length && (
+                <Checkbox
+                  label={selectAllLabel}
+                  isChecked={
+                    selectedAll || selectedOptions.length === options.length
+                  }
+                  isIndeterminate={!selectedAll && selectedOptions.length > 0}
+                  className="option_select_all_checkbox"
+                  onChange={this.onSelectedAllChange}
+                />
+              )}
+              <ADSelectorMainBody
+                options={options}
+                hasNextPage={hasNextPage}
+                isNextPageLoading={isNextPageLoading}
+                loadNextPage={loadNextPage}
+                isMultiSelect={isMultiSelect}
+                listHeight={listHeight}
+                listWidth={listWidth}
+                itemHeight={itemHeight}
+                onRowChecked={this.onOptionChange}
+                onRowSelect={this.onOptionSelect}
+                selectedOptions={selectedOptions}
+                selectedAll={selectedAll}
+              />
+            </div>
+            {displayType === "dropdown" &&
+              size === "full" &&
+              groups &&
+              groups.length > 0 && (
+                <ADSelectorAdditionalBody
+                  options={groups}
+                  selectedOptions={selectedGroups}
+                  listHeight={listHeight}
+                  itemHeight={itemHeight}
+                  onRowChecked={this.onGroupChange}
+                  onRowSelect={this.onGroupSelect}
+                />
+              )}
+          </div>
+          {isMultiSelect && (
+            <ADSelectorFooter
+              buttonLabel={buttonLabel}
+              isDisabled={
+                !this.state.selectedOptions ||
+                !this.state.selectedOptions.length
+              }
+              onClick={this.onButtonClick}
+            />
+          )}
+        </div>
+      </StyledBodyContainer>
+    );
+  }
 }
 
-export default ADSelectorBody;
\ No newline at end of file
+ADSelectorBody.propTypes = {
+    isOpen: PropTypes.bool,
+    options: PropTypes.array,
+    groups: PropTypes.array,
+    hasNextPage: PropTypes.bool,
+    isNextPageLoading: PropTypes.bool,
+    loadNextPage: PropTypes.func,
+    value: PropTypes.string,
+    placeholder: PropTypes.string,
+    isDisabled: PropTypes.bool,
+    onSearchChanged: PropTypes.func,
+    isMultiSelect: PropTypes.bool,
+    buttonLabel: PropTypes.string,
+    selectAllLabel: PropTypes.string,
+    size: PropTypes.string,
+    displayType: PropTypes.oneOf(["dropdown", "aside"]),
+    onAddNewClick: PropTypes.func,
+    allowCreation: PropTypes.bool,
+    onSelect: PropTypes.func,
+    onChange: PropTypes.func,
+    onGroupSelect: PropTypes.func,
+    onGroupChange: PropTypes.func,
+    selectedOptions: PropTypes.array, 
+    selectedGroups: PropTypes.array, 
+    selectedAll: PropTypes.bool,
+    onCancel: PropTypes.func, 
+    allowAnyClickClose: PropTypes.bool,
+};
+
+export default ADSelectorBody;
diff --git a/web/ASC.Web.Components/src/components/advanced-selector/sub-components/footer.js b/web/ASC.Web.Components/src/components/advanced-selector/sub-components/footer.js
index 5b95b147bc..3549ba644b 100644
--- a/web/ASC.Web.Components/src/components/advanced-selector/sub-components/footer.js
+++ b/web/ASC.Web.Components/src/components/advanced-selector/sub-components/footer.js
@@ -2,28 +2,28 @@ import React from "react";
 import PropTypes from "prop-types";
 import Button from "../../button";
 
-const ADSelectorFooter = (props) => {
-    const { buttonLabel, isDisabled, onButtonClick } = props;
+const ADSelectorFooter = props => {
+  const { buttonLabel, isDisabled, onClick } = props;
 
-    return (
-        <div className="button_container">
-            <Button
-                className="add_members_btn"
-                primary={true}
-                size="big"
-                label={buttonLabel}
-                scale={true}
-                isDisabled={isDisabled}
-                onClick={onButtonClick}
-            />
-        </div>
-    );
+  return (
+    <div className="button_container">
+      <Button
+        className="add_members_btn"
+        primary={true}
+        size="big"
+        label={buttonLabel}
+        scale={true}
+        isDisabled={isDisabled}
+        onClick={onClick}
+      />
+    </div>
+  );
 };
 
 ADSelectorFooter.propTypes = {
-    buttonLabel: PropTypes.string,
-    isDisabled: PropTypes.bool,
-    onButtonClick: PropTypes.func
-}
+  buttonLabel: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  onClick: PropTypes.func
+};
 
-export default ADSelectorFooter;
\ No newline at end of file
+export default ADSelectorFooter;
diff --git a/web/ASC.Web.Components/src/components/advanced-selector/sub-components/sections/additional/body.js b/web/ASC.Web.Components/src/components/advanced-selector/sub-components/sections/additional/body.js
index 64aafa9e0c..04f36cb89c 100644
--- a/web/ASC.Web.Components/src/components/advanced-selector/sub-components/sections/additional/body.js
+++ b/web/ASC.Web.Components/src/components/advanced-selector/sub-components/sections/additional/body.js
@@ -7,58 +7,57 @@ import ADSelectorRow from "../../row";
 import findIndex from "lodash/findIndex";
 
 class ADSelectorAdditionalBody extends React.Component {
+  renderRow = ({ data, index, style }) => {
+    const option = data[index];
+    var isChecked = this.props.isMultiSelect
+      ? this.props.selectedAll ||
+        findIndex(this.props.selectedOptions, { key: option.key }) > -1
+      : undefined;
 
+    //console.log("renderRow", option, isChecked, this.state.selectedOptions);
+    return (
+      <ADSelectorRow
+        key={option.key}
+        label={option.label}
+        isChecked={isChecked}
+        style={style}
+        onChange={this.props.onRowChecked.bind(this, option)}
+        onSelect={this.props.onRowSelect.bind(this, option)}
+      />
+    );
+  };
 
-    renderRow = ({ data, index, style }) => {
-        const option = data[index];
-        var isChecked = this.props.isMultiSelect ? (
-            this.state.selectedAll ||
-            findIndex(this.state.selectedOptions, { key: option.key }) > -1) : undefined;
-
-        //console.log("renderRow", option, isChecked, this.state.selectedOptions);
-        return (
-            <ADSelectorRow
-                key={option.key}
-                label={option.label}
-                isChecked={isChecked}
-                style={style}
-                onChange={this.props.onRowChecked.bind(this, option)}
-                onSelect={this.props.onRowSelect.bind(this, option)}
-            />
-        );
-    };
-
-    render() {
-        const { groups, listHeight, itemHeight } = this.props;
-        return (
-            <div className="data_column_two">
-                      <Text.Body
-                        as="p"
-                        className="group_header"
-                        fontSize={15}
-                        isBold={true}
-                      >
-                        Groups
-                      </Text.Body>
-                      <FixedSizeList
-                        className="group_list"
-                        height={listHeight}
-                        itemSize={itemHeight}
-                        itemCount={groups.length}
-                        itemData={groups}
-                        outerElementType={CustomScrollbarsVirtualList}
-                      >
-                        {this.renderRow.bind(this)}
-                      </FixedSizeList>
-                    </div>
-        );
-    }
+  render() {
+    const { options, listHeight, itemHeight } = this.props;
+    return (
+      <div className="data_column_two">
+        <Text.Body as="p" className="group_header" fontSize={15} isBold={true}>
+          Groups
+        </Text.Body>
+        <FixedSizeList
+          className="group_list"
+          height={listHeight}
+          itemSize={itemHeight}
+          itemCount={options.length}
+          itemData={options}
+          outerElementType={CustomScrollbarsVirtualList}
+        >
+          {this.renderRow.bind(this)}
+        </FixedSizeList>
+      </div>
+    );
+  }
 }
 
 ADSelectorAdditionalBody.propTypes = {
-    groups: PropTypes.array,
-    listHeight: PropTypes.number,
-    itemHeight: PropTypes.number
-}
+  options: PropTypes.array,
+  selectedOptions: PropTypes.array,
+  selectedAll: PropTypes.bool,
+  isMultiSelect: PropTypes.bool,
+  listHeight: PropTypes.number,
+  itemHeight: PropTypes.number,
+  onRowChecked: PropTypes.func,
+  onRowSelect: PropTypes.func
+};
 
-export default ADSelectorAdditionalBody;
\ No newline at end of file
+export default ADSelectorAdditionalBody;
diff --git a/web/ASC.Web.Components/src/components/advanced-selector/sub-components/sections/main/body.js b/web/ASC.Web.Components/src/components/advanced-selector/sub-components/sections/main/body.js
index 08a53f3cb4..39ad26224a 100644
--- a/web/ASC.Web.Components/src/components/advanced-selector/sub-components/sections/main/body.js
+++ b/web/ASC.Web.Components/src/components/advanced-selector/sub-components/sections/main/body.js
@@ -9,11 +9,6 @@ import { Text } from "../../../../text";
 import findIndex from "lodash/findIndex";
 
 class ADSelectorMainBody extends React.Component {
-  state = {
-    selectedAll: false,
-    selectedOptions: []
-  };
-
   renderRow = ({ index, style }) => {
     //console.log("renderRow", option, isChecked, this.state.selectedOptions);
 
@@ -33,10 +28,11 @@ class ADSelectorMainBody extends React.Component {
         </div>
       );
     } else {
-      const option = this.props.options[index];
-      var isChecked = this.props.isMultiSelect
-        ? this.state.selectedAll ||
-          findIndex(this.state.selectedOptions, { key: option.key }) > -1
+      const {options, isMultiSelect, selectedAll, selectedOptions} = this.props;
+      const option = options[index];
+      var isChecked = isMultiSelect
+        ? selectedAll ||
+          findIndex(selectedOptions, { key: option.key }) > -1
         : undefined;
 
       content = (
@@ -104,7 +100,10 @@ ADSelectorMainBody.propTypes = {
   isNextPageLoading: PropTypes.bool,
   loadNextPage: PropTypes.func,
 
+  selectedOptions: PropTypes.array,
+  selectedAll: PropTypes.bool,
   isMultiSelect: PropTypes.bool,
+
   listHeight: PropTypes.number,
   listWidth: PropTypes.number,
   itemHeight: PropTypes.number,