chore: apply code review

.eslintrc.js

@@ -14,6 +14,6 @@ module.exports = {
   extends: ['tui/es6', 'plugin:prettier/recommended'],
   globals: {
     toastui: true,
-    fixture: true
+    setFixtures: true
   }
 };

.gitignore

@@ -16,9 +16,6 @@ coverage
 # Compiled binary addons (http://nodejs.org/api/addons.html)
 build/Release
 
-# Distribution directory
-# dist
-
 # Dependency directory
 node_modules
 

example/index.html

@@ -62,7 +62,7 @@
           }
         ]
       };
-      var selectBox = new toastui.SelectBox('#select-box', options);
+      var selectBox = new tui.SelectBox('#select-box', options);
     </script>
   </body>
 </html>

karma.conf.js

@@ -110,8 +110,15 @@ function setConfig(defaultConfig, server) {
 module.exports = function(config) {
   const defaultConfig = {
     basePath: './',
-    frameworks: ['fixture', 'jasmine', 'es5-shim'],
-    files: ['test/index.js'],
+    frameworks: ['jquery-1.11.0', 'jasmine', 'es5-shim'],
+    files: [
+      {
+        // karma-jasmine-jquery does not support IE8, so include jasmine-jquery directly
+        pattern: 'node_modules/jasmine-jquery/lib/jasmine-jquery.js',
+        watched: false
+      },
+      'test/index.js'
+    ],
     preprocessors: {
       'test/index.js': ['webpack', 'sourcemap']
     },

package.json

@@ -31,6 +31,7 @@
     "@babel/core": "^7.6.0",
     "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
     "@babel/preset-env": "^7.6.0",
+    "autoprefixer": "^9.6.4",
     "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.6",
     "css-loader": "^3.2.0",
@@ -41,12 +42,13 @@
     "eslint-plugin-prettier": "^3.1.1",
     "istanbul-instrumenter-loader": "^3.0.1",
     "jasmine-core": "^2.9.1",
+    "jasmine-jquery": "^2.1.1",
     "karma": "^4.3.0",
     "karma-chrome-launcher": "^3.1.0",
     "karma-coverage": "^2.0.1",
     "karma-es5-shim": "0.0.4",
-    "karma-fixture": "^0.2.6",
     "karma-jasmine": "^1.0.2",
+    "karma-jquery": "^0.2.4",
     "karma-junit-reporter": "^1.2.0",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webdriver-launcher": "git+https://github.com/nhn/karma-webdriver-launcher.git#v1.2.0",

src/css/selectBox.css

@@ -1,8 +1,18 @@
+.tui-select-box {
+  position: relative;
+}
+
+.input,
+.dropdown,
+.item-group-label,
+.item {
+  box-sizing: border-box;
+}
+
 /* Input */
 
 .input {
   border: 1px solid #ddd;
-  box-sizing: border-box;
   height: 29px;
   padding: 4px 8px;
   cursor: pointer;
@@ -12,20 +22,26 @@
   border-color: #aaa;
 }
 
+.input:focus {
+  border: 1px solid transparent;
+}
+
 .placeholder {
   display: inline-block;
   margin: 0;
   color: #333;
   font-size: 13px;
   line-height: 15px;
   user-select: none;
+  width: calc(100% - 12px);
+  vertical-align: sub;
 }
 
 .ico-select {
   display: block;
   float: right;
   background: url(../img/ico_tui_select.png) left center no-repeat;
-  width: 8px;
+  width: 7px;
   overflow: hidden;
   text-indent: 100%;
 }
@@ -37,7 +53,7 @@
 /* Dropdown */
 
 .dropdown,
-.optgroup {
+.item-group {
   margin: 0;
   padding: 0;
   list-style-type: none;
@@ -46,34 +62,37 @@
 .dropdown {
   border: 1px solid #aaa;
   border-top: none;
-  box-sizing: border-box;
   /* max-height: 145px; */
   overflow: auto;
+  z-index: 1;
+  width: 100%;
+  position: absolute;
+  background: #fff;
 }
 
-/* Optgroup */
+/* ItemGroup */
 
-.optgroup > .option {
+.item-group > .item {
   padding-left: 1.5em;
 }
 
-.optgroup-label {
+.item-group-label {
+  display: block;
   font-weight: bold;
 }
 
-/* Option */
+/* Item */
 
-.optgroup-label,
-.option {
-  box-sizing: border-box;
+.item-group-label,
+.item {
   height: 29px;
   padding: 8px 7px;
   color: #333;
   font-size: 13px;
   line-height: 15px;
 }
 
-.option {
+.item {
   cursor: pointer;
 }
 
@@ -86,6 +105,14 @@
   outline: none;
 }
 
+.placeholder,
+.item-group-label,
+.item {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 /* Common */
 
 .hidden {